Элементы управления календарем, датой и временем

Статья
07/13/2023

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

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

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

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

Какой элемент управления датой и временем следует использовать?

Существует четыре элемента управления датой и временем. Выбор нужного элемента управления зависит от сценария использования вашего приложения. Эта информация поможет выбрать нужный элемент управления для вашего приложения.

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

Представление календаря

CalendarView позволяет пользователю просматривать календарь и взаимодействовать с ним, перемещаясь по месяцам, годам и десятилетиям. Пользователь может выбрать отдельную дату или диапазон дат. Не имеет поверхности выбора, и календарь всегда виден.

Представление календаря состоит из 3 отдельных представлений: представление месяца, представление года и представление десятилетия. По умолчанию он отображается с открытым представлением месяца, но в качестве начального представления можно задать любое из его представлений.

Если необходимо предоставить пользователю возможность выбора нескольких дат, следует использовать CalendarView.
Если необходимо предоставить пользователю возможность выбора одной даты и не нужно, чтобы календарь был виден всегда, рекомендуется использовать элементы управления CalendarDatePicker или DatePicker.

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

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

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

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

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

Элемент управления DatePicker представляет собой стандартизированное средство выбора нужной даты.

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

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

Средство выбора времени

Элемент управления TimePicker используется для выбора одного значения времени (например, времени встречи или времени отъезда). Это статический отображаемый элемент, задаваемый пользователем или посредством программного кода. Он не обновляется для отображения текущего времени.

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

Используйте элемент выбора времени, чтобы пользователь мог выбрать одно значение времени.

Создание элемента управления датой и временем

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

Использование управляющего элемента выбора даты и выбора времени вместе

В этом примере показано, как использовать DatePicker и TimePicker вместе, чтобы позволить пользователю выбрать дату и время прибытия. Вы обрабатываете события SelectedDateChanged и SelectedTimeChanged, чтобы обновить один экземпляр DateTime с именем arrivalDateTime. Пользователь может также очистить управляющий элемент выбора даты и времени после их установки.

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

<StackPanel>
    <DatePicker x:Name="arrivalDatePicker" Header="Arrival date"
                DayFormat="{}{day.integer} ({dayofweek.abbreviated})"
                SelectedDateChanged="ArrivalDatePicker_SelectedDateChanged"/>
    <StackPanel Orientation="Horizontal">
        <TimePicker x:Name="arrivalTimePicker" Header="Arrival time"
                MinuteIncrement="15"
                SelectedTimeChanged="ArrivalTimePicker_SelectedTimeChanged"/>
        <Button Content="Clear" Click="ClearDateButton_Click"
                VerticalAlignment="Bottom" Height="30" Width="54"/>
    </StackPanel>
    <TextBlock x:Name="arrivalText" Margin="0,12"/>
</StackPanel>

public sealed partial class MainPage : Page
{
    DateTime arrivalDateTime;

    public MainPage()
    {
        this.InitializeComponent();

        // Set minimum to the current year and maximum to five years from now.
        arrivalDatePicker.MinYear = DateTimeOffset.Now;
        arrivalDatePicker.MaxYear = DateTimeOffset.Now.AddYears(5);
    }

    private void ArrivalTimePicker_SelectedTimeChanged(TimePicker sender, TimePickerSelectedValueChangedEventArgs args)
    {
        if (arrivalTimePicker.SelectedTime != null)
        {
            arrivalDateTime = new DateTime(arrivalDateTime.Year, arrivalDateTime.Month, arrivalDateTime.Day,
                                           args.NewTime.Value.Hours, args.NewTime.Value.Minutes, args.NewTime.Value.Seconds);
        }
        arrivalText.Text = arrivalDateTime.ToString();
    }

    private void ArrivalDatePicker_SelectedDateChanged(DatePicker sender, DatePickerSelectedValueChangedEventArgs args)
    {
        if (arrivalDatePicker.SelectedDate != null)
        {
            if (VerifyDateIsFuture((DateTimeOffset)arrivalDatePicker.SelectedDate) == true)
            {
                arrivalDateTime = new DateTime(args.NewDate.Value.Year, args.NewDate.Value.Month, args.NewDate.Value.Day,
                                               arrivalDateTime.Hour, arrivalDateTime.Minute, arrivalDateTime.Second);
                arrivalText.Text = arrivalDateTime.ToString();
            }
            else
            {
                arrivalDatePicker.SelectedDate = null;
                arrivalText.Text = "Arrival date must be later than today.";
            }
        }
    }

    private bool VerifyDateIsFuture(DateTimeOffset date)
    {
        if (date > DateTimeOffset.Now)
        {
            return true;
        }
        return false;
    }

    private void ClearDateButton_Click(object sender, RoutedEventArgs e)
    {
        arrivalDateTime = new DateTime();
        arrivalDatePicker.SelectedDate = null;
        arrivalTimePicker.SelectedTime = null;
        arrivalText.Text = string.Empty;
    }
}

Глобализация

Элементы управления датами XAML поддерживает все календарные системы, поддерживаемые Windows. Эти календари определены в классе Windows.Globalization.CalendarIdentifiers. Каждый элемент управления использует календарь, соответствующий языку по умолчанию, используемому в приложении. Кроме того, вы можете задать значение свойства CalendarIdentifier, чтобы использовать конкретную календарную систему.

Элемент управления "Выбор времени" поддерживает все системы часов, определенные в классе Windows.Globalization.ClockIdentifiers. Вы можете задать значение свойства ClockIdentifier, чтобы использовать 12- или 24-часовой формат отображения времени. Значение свойства имеет строковый тип, но следует использовать значения, соответствующие статическим строковым свойствам класса ClockIdentifiers. А именно: TwelveHour (строка 12HourClock) и TwentyFourHour (строка 24HourClock). По умолчанию используется значение 12HourClock.

Значения DateTime и Calendar

Объекты даты, используемые в элементах управления выбором даты и времени в XAML, имеют другое представление в зависимости от применяемого вами языка программирования.

Языки C# и Visual Basic используют структуру System.DateTimeOffset, которая предоставляется в .NET.
Языки C++ и CX используют структуру Windows::Foundation::DateTime.

С этим также связан класс Calendar, который влияет на интерпретацию дат в контексте. Все приложения среды выполнения Windows могут использовать класс Windows.Globalization.Calendar. Приложения на C# и Visual Basic могут также использовать класс System.Globalization.Calendar с очень похожими функциями. (Приложения среды выполнения Windows могут использовать базовый класс .NET Calendar, но не определенные реализации; например GregorianCalendar.)

.NET также поддерживает тип DateTime, который неявно преобразуется в DateTimeOffset. Вы могли видеть тип DateTime, который используется в коде .NET для задания значений, которые на самом деле имеют тип DateTimeOffset. См. подробнее об отличиях между типами DateTime и DateTimeOffset в разделе "Примечания" в описании класса DateTimeOffset.

Примечание

Свойствам, которые принимают объекты даты в качестве значений, нельзя присвоить строку атрибута XAML, так как анализатор XAML среды выполнения Windows не содержит логику преобразования строк в даты в виде объектов DateTime или DateTimeOffset. Эти значения обычно задаются в коде. Другой возможный способ — определить дату, доступную в виде объекта данных или в контексте данных, а затем задать свойство в качестве атрибута XAML, который ссылается на выражение расширения разметки {Binding} , которое может обращаться к дате в качестве данных.

Элементы управления календарем, датой и временем