DatePicker and TimePicker Dialogs in MeeGo Qt Quick Extras Components

Comments

Itapadar - Did you try using Datepicker Dialog only for one year? It shows corrupted UI for me on Meego , but works on Symbian

Hi,

Was trying DatePickerDialog with minimumyear and maximumyear = 2012, and what I see was a corrupted UI, with 2012 half cut. It works well on Symbian though.

Also, QML extras components doesnt seem to work on latest qt simulator.

itapadar 17:06, 4 January 2012 (EET)

Gaba88 - I cant find that on my device

Hello itapadar,

I checked this on my N9 and it seems to work fine. Then also i will give a detailed look to find whats happening wrong there at your end. Regarding getting the QML extras component on Qt Simulator you need to some settings on that, i exactly dont remember that but let me try to find it for you.

gaba88 05:28, 6 January 2012 (EET)

Log in or Join to leave comments.

This article demonstrates how to use DatePickerDialog and TimePickerDialog from the MeeGo Qt Quick Components Extras. These handy components allow users to select dates and times using "tumblers".

---

Article Metadata

---

Tested with

SDK: Qt SDK 1.1.3

Devices(s): N950

---

Compatibility

Platform(s): MeeGo Harmattan

---

Article

Keywords: DatePickerDialog, TimePickerDialog

Created: gaba88 (30 Sep 2011)

Last edited: hamishwillee (13 Jun 2012)

Code snippet

Note that as these are part of the extras component, we need to include import com.nokia.extras 1.0 in our QML script.

import QtQuick 1.1 
import com.nokia.meego 1.0
import com.nokia.extras 1.0   
 
Page{
    id:dialogPage
    function showTimePicker(){
        timePickerDialog.open()
    }
    function showDatePicker(){
        datePickerDialog.open()
    }
    function timePickerAccepted(){
        dateLabel.text = "Selected Time: "+timePickerDialog.hour+":"+timePickerDialog.minute+":"+timePickerDialog.second
    }
    function datePickerAccepted(){
        dateLabel.text = "Selected Date: "+datePickerDialog.day+"/"+datePickerDialog.month+"/"+datePickerDialog.year
    }
    ButtonColumn{
        id:buttonColumn
        anchors.top: parent.top ; anchors.topMargin: 20
        width: parent.width
        Button{
            text: "Show Date Picker"
            onClicked: {
                showDatePicker()
            }
        }
        Button{
            text: "Show Timer Picker"
            onClicked: {
                showTimePicker()
            }
        }
    }
    Label{
        id:dateLabel
        anchors.top:buttonColumn.bottom ; anchors.topMargin: 20
        width: buttonColumn.width; height: buttonColumn.height
    }
    DatePickerDialog{
        id:datePickerDialog
        titleText: "Select Date"
        onAccepted: {datePickerAccepted()}
    }
    TimePickerDialog{
        id:timePickerDialog
        titleText: "Select Time"
        acceptButtonText: "Confirm"
        rejectButtonText: "Reject"
        onAccepted: timePickerAccepted()
    }
}