Selecting Date and Time Values with the DatePicker and TimePicker

Entering a date or time on the phone would be an otherwise cumbersome task if it relied solely on the phone SIP (Software Input Panel) or hardware keyboard. DatePicker and TimePicker conform to the language of the phone and provide an interface that makes selecting a date or time easy.

Both the DatePicker and TimePicker use a TextBox to display a date or time value (see Figure 9.13).

FIGURE 9.13 DatePicker and TimePicker controls.

When the user taps the TextBox, a form is presented that allows the user to specify the date or time using a set of infinitely scrollable controls (see Figure 9.14).

FIGURE 9.14 DatePicker while in selection mode.

The DatePicker and TimePicker inherit from the same base class, which is DateTimePickerBase. The DateTimePickerBase class contains a Value property of type nullable DateTime. The DatePicker and TimePicker share the same public API, which is provided entirely by the base class. The DatePicker deals with the date segment of the DateTime value; the TimePicker, the time segment.

There are two main differences between the DatePicker and TimePicker. The first is the string pattern used to present the DataTime value. The DatePicker presents the DateTime value using the short date pattern, such that a date value of 6/1/2015 1:45:30 PM is presented as 6/1/2015. Conversely, the TimePicker presents the DateTime value using the short time pattern, such that a date value of 6/1/2015 1:45:30 PM is presented as 1:45 PM. You look at customizing the value format for both controls in a later section.

The second difference is the type of the associated PhoneApplicationPage for each control. DatePicker and TimePicker each rely on a particular PhoneApplicationPage for allowing the user to select the DateTime value. When the user taps the DatePicker, the control navigates to the built-in DatePickerPage. Conversely, when the user taps the TimePicker, the control navigates to the built-in TimePickerPage.