XAML DatePicker

The XAML <DatePicker> element is used to create a DatePicker control that lets user to see a visual calendar and select a date or a date range on a month view. The code sample in this article demonstrates how to create and use a DatePicker control in WPF.

This article has moved here: WPF DatePicker Control Using C#

 

The following code sample create a DatePicker control in XAML. See Listing 1. 

<DatePicker Height="25" HorizontalAlignment="Left" Margin="42,26,0,0" Name="datePicker1"
VerticalAlignment="Top" Width="115" />

Listing 1

The Width and Height attributes of the DatePicker element represent the width and the height of a DatePicker. The Content attribute represents the text of a DatePicker. The Name attribute represents the name of the control, that is a unique identifier of a control.

When you run this code, you will see a TextBox with the text Select a date and when you click on this TextBox or the date, the Calendar dropdown will appear where you can select a date. The selected date will be the date in the TextBox as you can see in Figure 1.


                Figure 1

Display Date

The DisplayDate property represents the date to display. The default is today.

IsDropDownOpen

The IsDropDownOpen property indicates whether the calendar part of the DatePicker control is open or closed.

Text Property

The Text property represents the text that is displayed in the DatePicker.

Selection Date and Selection Date Format

The SelectedDate property represents the currently selected date. If the multiple dates selection is true, the SelectedDates property represents a collection of currently selected dates.

Blackout Dates In a WPF Calendar

The BlackoutDates property of the DatePicker class represents a collection of dates that are not available for selection. All non-selection dates are marked by a cross. For example, say in the month of March of the year 2010, we would like to block the dates from Jan 1st to Jan 7th and then all Sundays and the final DatePicker should look like Figure 2.


                 Figure 2

The following code snippet adds backout dates to a DatePicker.

<DatePicker.BlackoutDates>
   <CalendarDateRange Start="3/1/2010" End="3/7/2010"/>
   <CalendarDateRange Start="3/8/2010" End="3/8/2010"/>
   <CalendarDateRange Start="3/15/2010" End="3/15/2010"/>
   <CalendarDateRange Start="3/22/2010" End="3/22/2010"/>
   <CalendarDateRange Start="3/29/2010" End="3/29/2010"/>
</DatePicker.BlackoutDates>

We can do this by adding the code listed in Listing 2. As you can see from Listing 3, the BlackoutDates.Add method takes a CalendarDateRange object, that is a collection of two DateTime objects. The first date is the start date of the range and the second date is the end date of the date range.

private void SetBlackOutDates()
{
   MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(
      new DateTime(2010, 3, 1),
      new DateTime(2010, 3, 7)
   ));
   MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(
      new DateTime(2010, 3, 8),
      new DateTime(2010, 3, 8)
   ));
   MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(
      new DateTime(2010, 3, 15),
      new DateTime(2010, 3, 15)
   ));
   MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(
      new DateTime(2010, 3, 22),
      new DateTime(2010, 3, 22)
   ));
   MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(
      new DateTime(2010, 3, 29),
      new DateTime(2010, 3, 29)
   ));
}

Listing 2

DisplayDateStart and DisplayDateEnd

The DatePicker control allows you to set the start and end display dates using the DisplayDateStart and DisplayDateEnd properties. If you see Figure 2 in the previous section, you may notice the March 2010 month DatePicker display starts with the March 01, 2010 date. But now what if you want to display dates for month of March 2010 only? We can use the DisplayStartDate and DisplayEndDate properties to control the start and end dates of a month.

The DisplayDate property represents the current date to display.

The following code snippet sets the DisplayDate, DisplayDateStart and DisplayDateEnd attributes of the DatePicker element in XAML.

<DatePicker Name="MonthlyCalendar"
   SelectionMode="MultipleRange"
   DisplayDate="3/1/2010"
   DisplayDateStart="3/1/2010"
   DisplayDateEnd="3/31/2010"
/>

The code listed in Listing 3 makes sure the start date is March 01, 2010 and end date is March 31, 2010. The current selected date is March 05.

private void SetDisplayDates()
{
   MonthlyCalendar.DisplayDate = new DateTime(2010, 3, 5);
   MonthlyCalendar.DisplayDateStart = new DateTime(2010, 3, 1);
   MonthlyCalendar.DisplayDateEnd = new DateTime(2010, 3, 31);
}

Listing 3

The new DatePicker looks like Figure 3.


                Figure 3

FirstDayOfWeek and IsTodayHighlighted

By default, Sunday is the first day of week. If you would like to change it, you use the FirstDayOfWeek property. The IsTodayHightlighted property is used to make today highlighted.

The following code snippet sets the FirstDayOfWeek to Tuesday and makes today highlighted.

<DatePicker Name="MonthlyCalendar"
   SelectionMode="MultipleRange"
   DisplayDate="3/5/2010"
   DisplayDateStart="3/1/2010"
   DisplayDateEnd="3/31/2010"
   FirstDayOfWeek="Tuesday"
   IsTodayHighlighted="True"
   xmlns:sys="clr-namespace:System;assembly=mscorlib" Margin="15,39,88,19">

The following code snippet sets the FirstDayOfWeek to Tuesday and makes today highlighted in WPF.

MonthlyCalendar.FirstDayOfWeek = DayOfWeek.Tuesday;
MonthlyCalendar.IsTodayHighlighted = true;

The new DatePicker looks like Figure 4, where you can see the start day of the week is Tuesday.


                 Figure 4

Get Selected Dates

The SelectedDate property represents the current selected date. If multiple date selection is true, then the SelectedDates property represents all the selected dates in a DatePicker. The following code snippet sets the SelectedDates in XAML at design-time.

<DatePicker Name="MonthlyCalendar"
   SelectionMode="MultipleRange"
   DisplayDate="3/5/2010"
   DisplayDateStart="3/1/2010"
   DisplayDateEnd="3/31/2010"
   FirstDayOfWeek="Tuesday"
   IsTodayHighlighted="True"
   xmlns:sys="clr-namespace:System;assembly=mscorlib" Margin="15,39,88,19">

   <DatePicker.SelectedDates>
      <sys:DateTime>3/5/2010</sys:DateTime>
      <sys:DateTime>3/15/2010</sys:DateTime>
      <sys:DateTime>3/25/2010</sys:DateTime>
   </DatePicker.SelectedDates>
</DatePicker>

The selected dates in a DatePicker looks as in Figure 5 where you can see March 5th, 15th and 25th have a light blue background and represents the selected dates.


                  Figure 5

The following code snippet sets the SelectedDates property in WPF at run-time.

private void AddSelectedDates()
{
   MonthlyCalendar.SelectedDates.Add(new DateTime(2010, 3, 5));
   MonthlyCalendar.SelectedDates.Add(new DateTime(2010, 3, 15));
   MonthlyCalendar.SelectedDates.Add(new DateTime(2010, 3, 25));
}

Note: If you set the selected dates to any of the blockout dates then you will see the parser in XAML will throw an error like Figure 6.


                                                   Figure 6

DatePicker Events

Besides the normal control events, the DatePicker control has three DatePicker related events. These events are the DisplayDateChanged, DisplayModeChanged and SelectedDatesChanged. The DisplayDateChanged event is fired where the DisplayDate property is changed. The DisplayModeChanged event is fired when the DisplayMode property is changed. The SelectedDatesChanged event is fired when the SelectedDate or SelectedDates properties are changed. The following code snippet sets these three events attributes.

<DatePicker SelectionMode="SingleRange"
   Name="MonthlyCalendar"
   SelectedDatesChanged="MonthlyCalendar_SelectedDatesChanged"
   DisplayDateChanged="MonthlyCalendar_DisplayDateChanged"
   DisplayModeChanged="MonthlyCalendar_DisplayModeChanged"
   HorizontalAlignment="Left"
   VerticalAlignment="Top"
   Margin="10,10,0,0">
</DatePicker>

The code behind for these events looks like Listing 4.

private void MonthlyCalendar_SelectedDatesChanged(object sender,
SelectionChangedEventArgs e)
{
}
private void MonthlyCalendar_DisplayDateChanged(object sender,
CalendarDateChangedEventArgs e)
{
}
private void MonthlyCalendar_DisplayModeChanged(object sender,
CalendarModeChangedEventArgs e)
{
}

Listing 4

Normally, on a date selection, you may want to capture that event and know what the current selected date is. Now how about we add a TextBox control to the page and on the date selection, we will set the text of the TextBox to the currently selected date.

We add the following code to the XAML just below the DatePicker control.

<TextBox Width="200" Height="30"
   VerticalAlignment="Bottom"
   HorizontalAlignment="Left"
   Margin="10,10,10,10"
   x:Name="SelectedDateTextBox">
</TextBox>

On the SelectedDateChanged event handler, we set the TextBox.Text property to the SelectedDate property of the DatePicker control as you can see from code in Listing 5.

private void MonthlyCalendar_SelectedDatesChanged(object sender,
SelectionChangedEventArgs e)
{
   SelectedDateTextBox.Text = MonthlyCalendar.SelectedDate.ToString();
}

Listing 5

Now when you run the application, you will see output that looks like Figure 7. When you select a date in the DatePicker, it will be displayed in the TextBox.

                       Figure 7

 

Here is a complete tutorial: WPF DatePicker Control Using C#