Поделиться через

Выбор даты в календаре

Управляющий элемент выбора даты в календаре — это раскрывающийся элемент управления, оптимизированный для выбора отдельной даты в представлении календаря, когда важна контекстная информация, например день недели или заполненность календаря. Можно изменить календарь, чтобы предоставить дополнительный контекст или ограничить доступные даты.

Это правильный контроль?

Используйте средство выбора дат календаря, чтобы пользователь выбрал одну дату из контекстного представления календаря. Используйте его для таких действий, как выбор даты встречи или отъезда.

Чтобы пользователь мог выбрать известную дату, например дату рождения, если контекст календаря не важен, можно использовать управляющий элемент выбора даты.

Дополнительные сведения о выборе правильного элемента управления см. в статье "Элементы управления датами и временем".

Примеры

Точка входа отображает текст-заполнитель, если дата не установлена; в противном случае отображается выбранная дата. Когда пользователь выбирает точку входа, представление календаря расширяется для пользователя, чтобы выбрать дату. Представление календаря отображается поверх других элементов пользовательского интерфейса; он не вытесняет другие элементы.

Снимок экрана: средство выбора дат календаря с пустым текстовым полем выбора даты и заполненным календарем под ним.

Создание средства выбора дат календаря

Откройте приложение коллекции WinUI 3 и просмотрите CalendarDatePicker в действии

Значок коллекции WinUI 3 Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из Microsoft Store или просмотрите исходный код GitHub. 
<CalendarDatePicker x:Name="arrivalCalendarDatePicker" Header="Calendar"/>

CalendarDatePicker arrivalCalendarDatePicker = new CalendarDatePicker();
arrivalCalendarDatePicker.Header = "Calendar";

Получившийся виджет выбора даты в календаре выглядит вот так:

Снимок экрана заполненного элемента выбора даты календаря с меткой «Календарь».

Управляющий элемент выбора даты в календаре содержит внутренний элемент CalendarView для выбора даты. В набор свойств CalendarView, таких как IsTodayHighlighted и FirstDayOfWeek, входят свойства, доступные в CalendarDatePicker и перенаправляемые во внутренний элемент CalendarView, что позволяет вам их изменять.

Но изменить SelectionMode внутреннего элемента CalendarView, чтобы разрешить множественный выбор, нельзя. Если необходимо разрешить пользователю выбирать несколько дат или всегда отображать календарь, рекомендуется использовать представление календаря вместо средства выбора дат календаря. Дополнительные сведения о том, как изменить отображение календаря, см. в статье "Представление календаря".

Выбор дат

Используйте свойство Date, чтобы получить или установить выбранную дату. По умолчанию свойство Date имеет значение NULL. Когда пользователь выбирает дату в представлении календаря, это свойство обновляется. Пользователь может очистить дату, щелкнув выбранную дату в представлении календаря, чтобы отменить выбор.

Вы можете задать дату в коде, как показано ниже.

myCalendarDatePicker.Date = new DateTime(1977, 1, 5);

Если задать Date в коде, значение будет ограничено свойствами MinDate и MaxDate.

  • Если дата меньше MinDate, то для параметра MinDate задано значение MinDate.
  • Если Дата больше MaxDate, значение устанавливается в MaxDate.

Можно обработать событие DateChanged так, чтобы получать уведомление при изменении значения Date.

Замечание

Важные сведения о значениях даты см. в статье "Значения даты и времени" в разделе "Значения даты" и "Календарь".

Установка заголовка и текста-заполнителя

К элементу выбора даты в календаре можно добавить Header (или метку) и PlaceholderText (или водяной знак), чтобы пользователь понимал, для чего он используется. Чтобы настроить внешний вид заголовка, можно задать свойство HeaderTemplate вместо заголовка.

Текст заполнителя по умолчанию — "выбрать дату". Это можно удалить, задав свойство PlaceholderText пустой строке или указав пользовательский текст, как показано здесь.

<CalendarDatePicker x:Name="arrivalCalendarDatePicker" Header="Arrival date"
                    PlaceholderText="Choose your arrival date"/>
  • Last updated on