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: 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 in a Label, the default format is "YYYY-MM-DDTHH:MM:SS". You are able to use functions such as getMonth() and getHours() to manipulate the data so you can display it in whatever format you choose. For more information on manipulating DateTimePicker values, see Managing date and time selections.

Implementing a date and time picker

The following examples demonstrate how to implement the different modes of 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 day, month, and year.

DateTimePicker in Date mode.

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

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

Here's how to do the same thing in C++:

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

Time mode

The image to the right shows a DateTimePicker in Time mode. A DateTimePicker in Time mode is a two-column picker displaying hours and minutes.

DateTimePicker in Time mode.

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

Here's how to do the same thing in C++:

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

DateTime mode

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

DateTimePicker in DateTime mode.

To implement a DateTimePicker in DateTime mode, attach a DateTimePicker to a Container, and specify the title, mode, and value properties.

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

Here's how to do the same thing in C++:

dateTimePicker = DateTimePicker::create()
                 .title("DateTime")
                 .mode(DateTimePickerMode::DateTime);

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.

DateTimePicker in Timer mode.

Attach a DateTimePicker to a Container, and specify the id, title, mode, and value properties.

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

Here's how to do the same thing in C++:

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

JavaScript date object

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

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

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 using the value received from the picker. The code sample below shows how this is implemented.

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

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 alter the way the information gathered from the DateTimePicker is displayed, such as only displaying the time, you can use functions to acheive the look you want. To do this, you can use the getMonth(), getDay(), and getFullYear() functions to isolate the date information in a value returned by a DateTimePicker.

To isolate the date information, we specify the text of the Label as <pickerid>.value and add the getMonth(), getDay(), and getFullYear() functions to return the specific values we 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 a similar process to retrieve the time information from a DateTimePicker. In the example below, we use the getHours() and getMinutes() functions to isolate the time information. We include an if statement 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()
            }
    }
}

You can also 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"))
}

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: 2013-12-21



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

comments powered by Disqus