BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Date Controls - DatePicker

The sixty-sixth part of the Windows Presentation Foundation Fundamentals tutorial looks at the second date control that is provided by WPF. This is the DatePicker class, which allows users to select a date using a control that looks like a combo box.

DatePicker

In the previous article we looked at the Calendar control, which is used to display and select dates. The DatePicker is the second date selection control provided by Windows Presentation Foundation (WPF). A key difference between the two date controls is the manner in which they are rendered. A Calendar appears as a grid of dates with selections highlighted. The DatePicker looks similar to a combo box, with the date shown as text. Instead of a drop-down arrow, a small icon indicates the position that the user may click to select a date. When they do, a calendar with the same functionality as the Calendar control is displayed.

The DatePicker's members are very similar to those of Calendar. It includes properties such as DisplayDate, DisplayDateStart, DisplayDateEnd, SelectedDate and BlackoutDates. I won't describe these members again, so you should refer to the Calendar article for more information. In this article we'll look at two properties that the date controls do not share.

To begin, create a new WPF application in Visual Studio. Name the project, "DatePickerDemo". Once loaded, replace the XAML in the main window with that shown below:

<Window x:Class="DatePickerDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DatePicker Demo"
        Height="100"
        Width="200">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <DatePicker Name="DP" SelectedDateChanged="DP_SelectedDateChanged"/>
        <TextBlock Name="Info" Grid.Row="1"/>
    </Grid>
</Window>

Also add the following code behind the window to create the event that will be raised when a date is selected. We'll add code to method shortly.

private void DP_SelectedDateChanged(object sender, SelectionChangedEventArgs e)
{
}

Run the program to see the results. Try clicking the icon to see the pop-up calendar and select a date. The window should appear similar to the image below. You will find that you can also enter a date by typing into the control, without first showing the calendar.

WPF DatePicker demo window

Text Property

In many cases you will obtain the date that the user has chosen or entered using the SelectedDate property. In addition, you can read the Text property. This returns the text that is currently visible in the box.

To demonstrate, let's copy the text from the box into the TextBlock whenever the selected date changes. To do so, modify the method for the event, as follows:

private void DP_SelectedDateChanged(object sender, SelectionChangedEventArgs e)
{
    Info.Text = DP.Text;
}

Run the program and select a date to see the result. You can see that the TextBlock is updated to show the selected date in the format it appears in the DatePicker.

Changing the Date Format

The DatePicker control is locale-aware. By default, dates are formatted to match the short date format that the user has selected in the Control Panel. You can change to the long date format by modifying the value of the SelectedDateFormat property. This accepts a value from the DatePickerFormat enumeration. Only two values are possible. They are Long and Short.

For the final example, update the XAML for the DatePicker control as shown below to switch to the long date format.

<DatePicker Name="DP"
            SelectedDateFormat="Long"
            SelectedDateChanged="DP_SelectedDateChanged"/>
30 May 2014