Using the DatePicker and TimePicker

When building small and simple apps, you may choose to give your DatePicker or TimePicker a name and respond to its ValueChanged event in your page code-beside file. The following excerpt shows a ValueChanged event handler. DateTimeValueChangedEventArgs contains both the value before being modified by the user, and the value after being modified:

Click here to view code image

void DatePicker_ValueChanged(object sender, DateTimeValueChangedEventArgs e)
{
    DateTime? oldDataValue = e.OldDateTime;
    DateTime? newDateValue = e.NewDateTime;
}

Alternatively, you may choose to rely on data binding and bind your control to a viewmodel property, as shown:

Click here to view code image

<toolkit:DatePicker Value="{Binding Date, Mode=TwoWay}"
                    Header="date"
                    ValueChanged="DatePicker_ValueChanged" />

In either case, tapping the control navigates to a particular PhoneApplicationPage, allowing the user to set the DateTime value. The two pages, DatePickerPage and TimePickerPage, both rely on two icons that must be placed in your project. The icons are used to confirm or cancel the DateTime selection operation. Without these icons, the OK and Cancel ApplicationBarIconButtons are not displayed correctly (see Figure 9.15).

FIGURE 9.15 Without correct inclusion of PNG images, icon buttons are displayed using a broken icon.

For each ApplicationBarIconButton to be displayed correctly, images for the buttons must be placed in your project. The image icons should be placed in a directory called Toolkit.Content, in the root directory of your project. The images should be named ApplicationBar.Cancel.png and ApplicationBar.Check.png, and their Build Action should be set to Content (see Figure 9.16).

FIGURE 9.16 Set the icon image Build Action using the Properties pane.

Once in place, the images are automatically used by the DatePicker and TimePicker.