Date and time pickers

A DateTimePicker is a control for selecting a date or time.

You can use the following modes with DateTimePicker:

  • Date: A three-column picker displaying day, month, and year.
  • Time 0: A two-column picker displaying hours and minutes.
  • DateTime: A three-column picker displaying day, hours, and minutes.
  • Timer: A three-column picker displaying hours, minutes, and seconds.
DateTimePicker value displayed in a Label.

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 control in a Label, the default format is "YYYY-MM-DDTHH:MM:SS". You can to 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.

Prerequisites for a date and time picker

The following examples demonstrate how to implement the different modes of the DateTimePicker control in your app:

Date mode

The image to the right shows a DateTimePicker control in Date mode. Date mode is the default mode for a DateTimePicker, and displays the day, month, and year.

DateTimePicker in Date mode.

To implement a DateTimePicker control in Date mode, attach a DateTimePicker control to a Container, specify a title property, and enter a default display value.

 
Container {
    DateTimePicker {
        id: datepicker
        title: "Date"
        value: "1984-06-14"
    }
}
dateTimePicker = DateTimePicker::create()
                 .title("Date")
                 .value(QDateTime(QDate(1984, 6, 14)));

Not applicable

Time mode

The image to the right shows a DateTimePicker control in Time mode. A DateTimePicker control in Time mode has two columns that display hours and minutes.

DateTimePicker control in Time mode.

To implement a DateTimePicker control in Time mode, attach a DateTimePicker control 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")
    }
}
dateTimePicker = DateTimePicker::create()
                 .title("Time")
                 .mode(DateTimePickerMode::Time);
dateTimePicker->setValue(dateTimePicker->dateTimeFrom(QTime(10,11)));

Not applicable

DateTime mode

The image to the right shows a DateTimePicker control in DateTime mode. A DateTimePicker control in DateTime mode has a three columns that display the day, hours, and minutes.

DateTimePicker control in DateTime mode.

To implement a DateTimePicker control in DateTime mode, attach a DateTimePicker control 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"
    }
}
dateTimePicker = DateTimePicker::create()
                 .title("DateTime")
                 .mode(DateTimePickerMode::DateTime);

Not applicable

Timer mode

The image to the right shows a DateTimePicker control in Timer mode. A DateTimePicker control in Timer mode is a three-column picker displaying hours, minutes, and seconds.

DateTimePicker control in Timer mode.

Attach a DateTimePicker control 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")
    }
}
dateTimePicker = DateTimePicker::create()
    .title("Timer mode")
    .mode(DateTimePickerMode::Timer)
    .value(QDateTime(QDate::currentDate(), QTime(0, 0, 0)));

Not applicable

JavaScript date object

To implement a DateTimePicker control that uses a JavaScript date object, attach a DateTimePicker control to a Container, specify the id and mode, and specify a new JavaScript date object as the value property.

Container {
    DateTimePicker {
        id: picker
        title: "Date and time"
        mode: DateTimePickerMode.DateTime
        value: { new Date(); }
    }
}

Managing date and time selections

After you implement a DateTimePicker control in your app, you may want to manipulate the value from the DateTimePicker control to change the display format of the information.

The image to the right shows a DateTimePicker control and a Label. The Label text is set using the value received from the picker. The code sample below shows how this is implemented.

DateTimePicker control value displayed in a Label.
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 DateTime picker object
dtPicker = DateTimePicker::create()
        .title("DateTime Mode")
        .mode(DateTimePickerMode::DateTime);

// Find the main Container using its object name attribute
mainContainer = root->findChild<Container*>("cntrDateTime");
// Add the DateTime picker to the Container to display it
// in the UI
mainContainer->add(dtPicker);

// Access an existing Label object by its object name
// attribute
dateTimeLbl = root->findChild<Label*>("lblDateTime");

// Set the Label text with the current value of the 
// DateTime picker
dateTimeLbl->setText(dtPicker->value().toString());

Not applicable

The standard display format for DateTimePicker data is "YYYY-MM-DDTHH:MM:SS". If you implement a DateTimePicker control 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 QML or DateTime string formats in C++ to achieve the look you want. The example below shows you how to display specific date information using a Label control.

The getMonth(), getDay(), and getFullYear() functions let you isolate the date information in a value returned by a DateTimePicker control. 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(), we 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 control. 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.

// Access an existing Label object by its object name attribute
dateTimeLbl = root->findChild<Label*>("lblDateTime");

// Using a string format, set the Label text with 
// month, date, and year separated by a '/' character
dateTimeLbl->setText(dtPicker->value().toString("MM/dd/yyyy"));

Not applicable

You can use a similar process to retrieve the time information from a DateTimePicker. This example 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 control.

This example 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 example shows you how to use format strings to isolate the time information that's displayed in a Label control.

// Access an existing Label object by its object
// name attribute
dateTimeLbl = root->findChild<Label*>("lblDateTime");

// Using a string format, set the Label text with 
// hours and minutes separated by a ':' character
dateTimeLbl->setText(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"))
}
// Access an existing Label object by its object 
// name attribute
dateTimeLbl = root->findChild<Label*>("lblDateTime");

// Using a string format, set the Label text with 
// four digit year, month, day separated by
// a '-' character
dateTimeLbl->setText(dtPicker->value()
    .toString("YYYY-MM-DD"));

Not applicable

The image to the right shows a DateTimePicker control with the date and time information isolated in separate Label objects.

DateTimePicker control value isolated in separate Label objects.

Last modified: 2015-03-31



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus