Container { DateTimePicker { id: datepicker title: "Date" value: "1984-06-14" } }
Date and time pickers
A DateTimePicker is used to select a date or time.
You can use the following modes with DateTimePicker:

A DateTimePicker supports different date and time formats for displaying a date and time in the picker, depending on the mode you select.
When you display a selected value from a DateTimePicker in a Label, the default format is "YYYY-MM-DDTHH:MM:SS". You can use functions such as getMonth() and getHours() to manipulate the data and display it in whatever format you choose. For more information about manipulating DateTimePicker values, see Managing date and time selections.
Creating a date and time picker
The following code samples demonstrate how to implement the different modes of the DateTimePicker in your app.
Date mode
The image to the right shows a DateTimePicker in Date mode. Date mode is the default mode for a DateTimePicker, and displays the month, day, and year.
To implement a DateTimePicker in Date mode, attach a DateTimePicker to a Container, specify a title property, and enter a date value to display as the selected value.

//... Container* dtContr = Container::create(); DateTimePicker* dateTimePicker = DateTimePicker::create() .title("Date") .value(QDateTime(QDate(1984, 6, 14))); dtContr->add(dateTimePicker); //...
Not applicable
Time mode
The image to the right shows a DateTimePicker in Time mode. A DateTimePicker in Time mode has two columns that display hours and minutes.
To implement a DateTimePicker in Time mode, attach a DateTimePicker to a Container, and specify the id, title, mode, and value properties.

Container { DateTimePicker { id: picker title: "Time" mode: DateTimePickerMode.Time value: picker.dateFromTime("10:11:00") } }
//... Container* dtContr = Container::create(); dateTimePicker = DateTimePicker::create() .title("Time") .mode(DateTimePickerMode::Time); dateTimePicker->setValue(dateTimePicker->dateTimeFrom(QTime(10,11))); dtContr->add(dateTimePicker); //...
Not applicable
DateTime mode
The image to the right shows a DateTimePicker in DateTime mode. A DateTimePicker in DateTime mode has three columns that display the date, hours, and minutes.
To implement a DateTimePicker in DateTime mode, attach a DateTimePicker to a Container, and specify the title, mode, and value properties.

Container { DateTimePicker { id: datetimepicker title: "Date and time" mode: DateTimePickerMode.DateTime value: "1984-06-14T10:11:00" } }
//... Container* dtContr = Container::create(); dateTimePicker = DateTimePicker::create() .title("Date and time") .mode(DateTimePickerMode::DateTime) .value(QDateTime(QDate(1984, 6, 14))); dtContr->add(dateTimePicker); //...
Not applicable
Timer mode
The image to the right shows a DateTimePicker in Timer mode. A DateTimePicker in Timer mode is a three-column picker displaying hours, minutes, and seconds.
Attach a DateTimePicker to a Container, and specify the id, title, mode, and value properties.

Container { DateTimePicker { id: timerpicker title: "Timer" mode: DateTimePickerMode.Timer value: picker.dateFromTime("00:00:00") } }
//... Container* dtContr = Container::create(); dateTimePicker = DateTimePicker::create() .title("Timer mode") .mode(DateTimePickerMode::Timer) .value(QDateTime(QDate::currentDate(), QTime(0, 0, 0))); dtContr->add(dateTimePicker); //...
Not applicable
JavaScript date object
To implement a DateTimePicker that uses a JavaScript date object, attach a DateTimePicker to a Container, specify the id and mode, and specify a new JavaScript date object as the value property.
Managing date and time selections
After you implement a DateTimePicker in your app, you may want to manipulate the value from the DateTimePicker to change the display format of the information.
The image to the right shows a DateTimePicker and a Label. The Label text is set by using the value received from the picker. The code sample below shows how this is implemented.

import bb.cascades 1.0 Page { Container { horizontalAlignment: HorizontalAlignment.Center DateTimePicker { id: dtpicker title: "DateTime Mode" mode: DateTimePickerMode.DateTime } Label { horizontalAlignment: HorizontalAlignment.Center text: dtpicker.value } } }
// Create a DateTimePicker dtPicker = DateTimePicker::create() .title("DateTime Mode") .mode(DateTimePickerMode::DateTime); // Create a Container mainContainer = Container::create(); // Add the DateTimePicker to the Container to display it // in the UI mainContainer->add(dtPicker); // Create a Label and set its text with the current value // of the DateTimePicker dateTimeLbl = Label::create() .text(dtPicker->value().toString());
Not applicable
The standard display format for DateTimePicker data is "YYYY-MM-DDTHH:MM:SS". If you implement a DateTimePicker in Time mode, you still receive date information when you use the value from the picker in a Label.
If you want to filter how the date and time information received from the DateTimePicker is displayed, you can use functions in to achieve the look you want. The code sample below shows you how to display specific date information using a Label.
The getMonth(), getDay(), and getFullYear() functions let you isolate the date information in a value returned by a DateTimePicker. To isolate the date information, specify the text of the Label as <pickerid>.value and add the getMonth(), getDay(), and getFullYear() functions to return the specific values that you want. In the case of getMonth(), add "+ 1" to the returned value because the system begins the count at zero.
Label { id: datelabel horizontalAlignment: HorizontalAlignment.Center text: (dtpicker.value.getMonth() + 1) + "/" + (dtpicker.value.getDate()) + "/" + (dtpicker.value.getFullYear()) }
You can use DateTime string formats to isolate the specific date information that you want to display in your Label. Here we use the toString function with a DateTime format string that displays the date as month (as a number with a leading 0) / day (number with leading 0) / four digit year. There are many other format string combinations that can be used. For more information about format strings, see toString format strings.
// Create a Label and set its text with the month, // date, and year separated by a '/' character dateTimeLbl = Label::create() .text(dtPicker->value().toString("MM/dd/yyyy"));
Not applicable
You can use a similar process to retrieve the time information from a DateTimePicker. This code sample shows you how to filter the time information that's retrieved from the DateTimePicker so that it displays hours and minutes separated by a ':' character in a Label.
This code sample shows you how to use the getHours() and getMinutes() functions to isolate the time information. The if statement is used to put a zero in front of single-digit minute values.
Label { id: timelabel horizontalAlignment: HorizontalAlignment.Center text:{ if (dtpicker.value.getMinutes() < 10) { dtpicker.value.getHours() + ":" + "0" + dtpicker.value.getMinutes() } else { dtpicker.value.getHours() + ":" + dtpicker.value.getMinutes() } } }
This code sample shows you how to use format strings to isolate the time information that's displayed in a Label.
// Create a Label and set its text, using a string // format, with hours and minutes separated by // a ':' character dateTimeLbl = Label::create() .text(dtPicker->value().toString("hh:mm"));
Not applicable
You can use a toString function to return date information in a string format.
Label { id: stringdatelabel horizontalAlignment: HorizontalAlignment.Center text: (dtpicker.value.toString("YYYY-MM-DD")) }
// Create a Label and set its text, using a string // format, four digit year, month, day separated by // a '-' character dateTimeLbl = Label::create() .text(dtPicker->value().toString("YYYY-MM-DD"));
Not applicable
The image to the right shows a DateTimePicker with the date and time information isolated in separate Label objects.

Last modified: 2015-07-24