Элементы управления в WPF. Calendar и DatePicker — работа с датами

Для работы с датами в WPF используются два элемента управления — это Calendar и DatePicker. При этом, Calendar представляет собой сетку с календарем, а DatePicker — поле ввода (как ComboBox) в котором мы можем вручную задать дату или, кликнув по элементу, открыть сетку календаря и выбрать необходимую дату.

Элементы Calendar и DatePicker имеют достаточно много общих свойств. По сути, Calendar — это выпадающая часть списка DatePicker, которую можно использовать как самостоятельный элемент управления. Поэтому ниже мы рассмотрим свойства, которые мы можем использовать для обоих элементов управления.

Свойства Calendar и DatePicker

Свойства, которые одновременно могут использоваться в элементах Calendar и DatePicker представлены ниже:

Рассмотрим действия этих свойств на примере элемента управления Calendar:

<Calendar IsTodayHighlighted="True"
          DisplayDateStart="5/1/2025"
          DisplayDateEnd="6/30/2025"
          FirstDayOfWeek="Saturday">
    <Calendar.BlackoutDates>
        <CalendarDateRange Start="6/2/2025" End="6/4/2025"/>
        <CalendarDateRange Start="6/9/2025" End="6/9/2025"/>
        <CalendarDateRange Start="6/16/2025" End="6/16/2025"/>
        <CalendarDateRange Start="6/23/2025" End="6/25/2025"/>
        <CalendarDateRange Start="6/30/2025" End="6/30/2025"/>
    </Calendar.BlackoutDates>
</Calendar>

Здесь мы ограничиваем просмотр дат в календаре датами с 01 мая 2025 года по 30 июня 2025 года, подсвечиваем текущую дату, а первым дрем недели задаем субботу. При этом, обратите внимание на то, как мы определяем в XAML свойство BlackoutDates. Для этого мы используем элемент CalendarDateRange в котором указываем начальную и конечные даты. В первой записи мы запрещаем выбор дат с 02.06.2025 по 04.06.2025:

<CalendarDateRange Start="6/2/2025" End="6/4/2025"/>

а далее — каждая запись содержит по одному дню так как свойства Start и End у CalendarDateRange совпадают. Запустим приложение и посмотрим на результат:

Свойства Calendar

Элемент управления Calendar предоставляет нам следующие свойства:

Изменим код нашего календаря следующим образом:

<Calendar xmlns:sys="clr-namespace:System;assembly=mscorlib"
          IsTodayHighlighted="True"
          DisplayDateStart="5/1/2025"
          DisplayDateEnd="6/30/2025"
          FirstDayOfWeek="Saturday" 
          DisplayMode="Month"
          SelectionMode="MultipleRange">
    <Calendar.SelectedDates>
        <sys:DateTime>6/12/2025</sys:DateTime>
        <sys:DateTime>6/14/2025</sys:DateTime>
        <sys:DateTime>6/13/2025</sys:DateTime>
        <sys:DateTime>6/15/2025</sys:DateTime>
    </Calendar.SelectedDates>
</Calendar>

Теперь запустим приложение, чтобы убедиться, что в календаре по умолчанию выбран диапазон дат с 12 до 15 июня и мы можем, зажав клавишу Ctrl, выбирать несколько диапазонов дат:

Свойства DatePicker

В свою очередь, элемент управления DatePicker предоставляет нам следующие свойства:

Также, DatePicker предоставляет нам следующие события:

public event System.Windows.RoutedEventHandler CalendarClosed;

public event System.Windows.RoutedEventHandler CalendarOpened;

public event EventHandler<System.Windows.Controls.DatePickerDateValidationErrorEventArgs> DateValidationError;

public event EventHandler<System.Windows.Controls.SelectionChangedEventArgs> SelectedDateChanged;

Рассмотрим следующий пример использования элемента DatePicker.  XAML-разметка MainWindow.xaml будет следующая:

<Window x:Class="WpfApp9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp9"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Orientation="Horizontal" Margin="10">
        <DatePicker Margin="10"
                    VerticalAlignment="Top"
                    SelectedDateFormat="Short" 
                    CalendarOpened="DatePicker_CalendarOpened"
                    CalendarClosed="DatePicker_CalendarClosed"
                    SelectedDateChanged="DatePicker_SelectedDateChanged"/>
        <TextBlock Margin="10" x:Name="Status"/>
        <TextBlock Margin="10" x:Name="Data"/>
    </StackPanel>
</Window>

Здесь мы разместили элемент DatePicker у которого определили обработчики событий, а также формат отображаемой даты. А также — два элемента TextBlock для вывода информации:

<TextBlock Margin="10" x:Name="Status"/> 
<TextBlock Margin="10" x:Name="Data"/>

Обработчики событий DatePicker в файле MainWindow.xaml.cs будут следующими:

private void DatePicker_CalendarOpened(object sender, RoutedEventArgs e)
{
    Status.Text = "Календарь раскрыт";
}

private void DatePicker_CalendarClosed(object sender, RoutedEventArgs e)
{
    Status.Text = "Календарь закрыт";
}

private void DatePicker_SelectedDateChanged(object sender, SelectionChangedEventArgs e)
{
    Data.Text = $"Выбрана дата {(e.Source as DatePicker).SelectedDate}";
}

Запустим приложение и проверим результат работы:

Итого

Элементы Calendar и DatePicker представляют собой элементы для выбора даты. При этом, DatePicker — это элемент со встроенным Calendar. Об этих элемента имеют достаточно много общих свойств.