Date and time pickers

A DateTimePicker is used to select a date or time.

You can use the following modes with DateTimePicker:

  • Date: A three-column picker that displays the month, day, and year
  • Time: A two-column picker that displays hours and minutes
  • DateTime: A three-column picker that displays day, hours, and minutes
  • Timer: A three-column picker that displays 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 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.

DateTimePicker in Date mode.

QML

Container {
    DateTimePicker {
        id: datepicker
        title: "Date"
        value: "1984-06-14"
    }
}

C++

//...

Container* dtContr = Container::create();

DateTimePicker* dateTimePicker = DateTimePicker::create()
    .title("Date")
    .value(QDateTime(QDate(1984, 6, 14)));

dtContr->add(dateTimePicker);

//...

C

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.

DateTimePicker in Time mode.

QML

Container {
    DateTimePicker {
        id: picker
        title: "Time"
        mode: DateTimePickerMode.Time
        value: picker.dateFromTime("10:11:00")
    }
}

C++

//...

Container* dtContr = Container::create();

dateTimePicker = DateTimePicker::create()
                 .title("Time")
                 .mode(DateTimePickerMode::Time);
dateTimePicker->setValue(dateTimePicker->dateTimeFrom(QTime(10,11)));

dtContr->add(dateTimePicker);

//...

C

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.

DateTimePicker in DateTime mode.

QML

Container {
    DateTimePicker {
        id: datetimepicker 
        title: "Date and time"
        mode: DateTimePickerMode.DateTime
        value: "1984-06-14T10:11:00"
    }
}

C++

//...

Container* dtContr = Container::create();
                    
dateTimePicker = DateTimePicker::create()
    .title("Date and time")
    .mode(DateTimePickerMode::DateTime)
    .value(QDateTime(QDate(1984, 6, 14)));

dtContr->add(dateTimePicker);

//...

C

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.

DateTimePicker in Timer mode.

QML

Container {
    DateTimePicker {
        id: timerpicker
        title: "Timer"
        mode: DateTimePickerMode.Timer
        value: picker.dateFromTime("00:00:00")
    }
}

C++

//...

Container* dtContr = Container::create();
                                        
dateTimePicker = DateTimePicker::create()
    .title("Timer mode")
    .mode(DateTimePickerMode::Timer)
    .value(QDateTime(QDate::currentDate(), QTime(0, 0, 0)));

dtContr->add(dateTimePicker);

//...

C

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.

QML

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

C++

Not applicable

C

Not applicable

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.

DateTimePicker value displayed in a Label.

QML

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
        }
    }
}

C++

// 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());

C

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.

QML

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())
}

C++

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"));

C

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.

QML

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()
        }
    }
}

C++

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"));

C

Not applicable

You can use a toString function to return date information in a string format.

QML

Label {
    id: stringdatelabel
    horizontalAlignment: HorizontalAlignment.Center
    text: (dtpicker.value.toString("YYYY-MM-DD"))
}

C++

// 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"));

C

Not applicable

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

DateTimePicker value isolated in separate Label objects.

Last modified: 2015-07-24



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

comments powered by Disqus