Управляющий элемент выбора даты в календаре

  • Статья

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

Выбор правильного элемента управления

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

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

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

Примеры

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

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

UWP и WinUI 2

Важно!

Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.

В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

API для этого элемента управления существуют в пространстве имен Windows.UI.Xaml.Controls .

Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые последние стили и шаблоны для всех элементов управления. WinUI 2.2 или более поздней версии включает новый шаблон для этого элемента управления, использующий скругленные углы. Дополнительные сведения см. в разделе о радиусе угла.

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

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

Приложение "Коллекция WinUI 3" содержит интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или исходный код на сайте GitHub

<CalendarDatePicker x:Name="arrivalCalendarDatePicker" Header="Calendar"/>

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

Готовый элемент выбора даты в календаре выглядит следующим образом:

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

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

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

Выбора дат

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

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

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

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

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

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

Примечание

Важные сведения о значениях даты см. в разделе Значения DateTime и Calendar статьи "Элементы управления датой и временем".

Настройка текста заголовка и замещающего текста

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

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

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

Получение примера кода