Is there any DatePicker control for Qt 5?

Question

I'm writing my first QML/Javascript app for QtQuick 2.0. I need to place a DatePicker control, but I haven't found any control like that under QtQuick.Controls -and nowhere, in fact-.

I'm starting to believe there is no way to call a 'native' DatePicker in QML. Do I have to implement one or there is exist one?

Solution 1

Well, I had to make my own control. It is called Datepicker.

It is intented to used in this way:

import QtQuick.Controls 1.1

ApplicationWindow {
    id: main

    Datepicker {
        id: myDate
        activeWindow: main
        width: 200
    }
}

It asumes you are using it from a Window object, and needs the parent reference to show the datepicker in the correct position (it shows a calendar in a new window).

You can download the source code from: https://bitbucket.org/camolin3/datepicker

This is the first version and need a lot of polish to be ready, but is a start point.

Solution 2

Just in case anyone else stumbles upon this, there is a Calendar element in QtQuick.Controls by now. This should make the implementation of such a Datepicker a lot easier: http://qt-project.org/doc/qt-5/qml-qtquick-controls-calendar.html

Solution 3

**Code for DatePicker. Try this one **

*TextField {
    id: textDate
    x: 10
    y: 42
    width: 175
    height: 33
    placeholderText: qsTr("Text Field")
    text:Qt.formatDate(cal.selectedDate, "dd-MM-yyyy")
    font.bold: true
    font.family:"times new roman"
    font.pointSize: 12
}
Button {
    id: button
    x: 198
    y: 42
    width: 25
    height: 29
    Image {
        x: -4
        y: -4
        id: img
        width: 36
            height: 44
            source: "/Images/calendar-512.png"
    }
    onClicked:{
        cal.visible=true
    }
}
Calendar{
           id:cal
           x: 10
           y: 82
           width: 220
           height: 205
           visible: false
           selectedDate: new Date()
           onClicked:  {
               textDate.text=Qt.formatDate(cal.selectedDate, "dd-MM-yyyy");
                cal.visible=false
           }
}*

Comments

[koopajah]

There is no DatePicker component in QtQuick 2.0 yet but you can find some implementations on google like this one: qt-project.org/doc/qt-5.1/qtquick/…

[cmolina]

Thank you, but I was looking something more like a TextField with a 'Calendar' when you focus it.

[koopajah]

You're gonna have to do one yourself I think based on this example or other example your find on the web

[Michael]

The question specifies QtQuick 2.0, which I believe implies QtQuick.Controls 2.x. This Calendar element comes from QtQuick.Controls 1.4. It's helpful, but mixing several major versions of QtQuick in the same app may come with some downsides.