Home > C#, WinRT > DatePicker and TimePicker controls in Windows 8.1 Store apps

DatePicker and TimePicker controls in Windows 8.1 Store apps

16/07/2013

Windows 8.1 comes with some important XAML controls that are missing from the original Windows 8 release. Two of the most requested are DatePicker and TimePicker, that provide a modern UI to respectively select a date and a time of the day.

Their usage is straightforward:

<StackPanel>
    
    <DatePicker x:Name="datePicker" Header="Date:" 
                DayFormat="{}{day.integer} {dayofweek.full}" 
                Margin="5" DateChanged="datePicker_DateChanged" />
    
    <TimePicker x:Name="timePicker" Header="Time:" ClockIdentifier="24HourClock" 
                Margin="5" TimeChanged="timePicker_TimeChanged" />
    
</StackPanel>

The resulting UI follows:

DateTimePicker

Both the controls expose the Header property, with which we can show an header string just above the Combo Boxes. If we want a more complex caption, we can use the HeaderTemplate property, and then provide a DataTemplate:

<DatePicker x:Name="datePicker"
            DayFormat="{}{day.integer} {dayofweek.full}" 
            Margin="5" DateChanged="datePicker_DateChanged">
    <DatePicker.HeaderTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="Birthday" />
                <TextBlock Text="Please, select your date of birth" 
                           Foreground="LightGray" FontStyle="Italic" />
            </StackPanel>
        </DataTemplate>
    </DatePicker.HeaderTemplate>
</DatePicker>

DatePicker and TimePicker fully support globalization, so the controls automatically use date and time format that are set in Windows, and the strings are localized according to the corresponding language.

For what concerns DatePicker, we can use the DayFormat property to determine how the Combo Box for day selection appears. In the above example, we show the number of the day and the weekday name. We can also hide the day Combo Box at all by setting the DayVisible property to false.

In order to get or set the date shown in the DatePicker control, we need to use the Date property. When a new value is selected in any of the Combo Boxes, the DateChanged event is raised, with an argument of type DatePickerValueChangedEventArgs that contains the old date and the new one.

The TimePicker control provides the ClockIdentifier property, that allows to specify whether to use the 12-hour or 24-hour clock. The Time property gets or sets the time that is selected in the control. Likewise DatePicker, TimePicker raises the TimeChanged event when a new selection is made, and the TimePickerValueChangedEventArgs argument allows us to know the old and new time that has been selected.

Categories: C#, WinRT
%d bloggers like this: