Выбор даты и времени: DatePicker и TimePicker в .NET MAUI

Для выбора даты и времени в .NET MAUI используются элементы DatePicker и TimePicker. Разберемся с тем, как использовать эти элементы в наших приложениях.

DatePicker

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

Когда пользователь выбирает дату в DatePicker, генерируется событие

public event EventHandler<DateChangedEventArgs> DateSelected;

Продемонстрируем работу DatePicker. Создайте новое приложение .NET MAUI и измените XAML-код страницы MainPage.xaml следующим образом:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp7.MainPage">

    <VerticalStackLayout>
        <DatePicker MinimumDate="02/12/1991"
                    MaximumDate="03/14/2025"
                    DateSelected="OnDateChanged"
                    TextColor="Blue"/>

        <Label x:Name="MyLabel"/>
    </VerticalStackLayout>
</ContentPage>

Для того, чтобы задать значение свойств MinimumDate и MaximumDate в XAML, мы должны передать значения этих свойств в формате, который будет распознан. В данном случае, мы используем часто используемый настраиваемый формат даты в виде «MM/dd/yyyy». Теперь изменим файл отдельного кода MainPage.xaml.cs, добавив в него обработчик события OnDateChanged:

namespace MauiApp7
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        public void OnDateChanged(object sender, DateChangedEventArgs args)
        {
            MyLabel.Text = $"Предыдущее значение {args.OldDate}\r\nТекущее значение {args.NewDate}";
        }
    }
}

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

TimePicker

TimePicker используется для выбора времени и предоставляет следующие свойства:

При выборе времени генерируется событие

public event EventHandler<TimeChangedEventArgs> TimeSelected;

Перепишем наше приложение для работы с TimePicker. Для этого изменим код XAML следующим образом:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp7.MainPage">

    <VerticalStackLayout>
        <TimePicker TextColor="Blue"
                    Format="T"
                    TimeSelected="TimePicker_TimeSelected"/>

        <Label x:Name="MyLabel"/>
    </VerticalStackLayout>
</ContentPage>

и добавим в файл отдельного кода обработчик события TimeSelected:

private void TimePicker_TimeSelected(object sender, TimeChangedEventArgs e)
{
    MyLabel.Text = $"Предыдущее значение {e.OldTime}\r\nТекущее значение {e.NewTime}";
}

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

Обратие внимание — несмотря на то, что мы указали в свойстве Format полный формат времени, при работе приложения мы не можем выбрать секунды. Это особенность работы элемента TimePicker. При работе в Windows формат времени влияет только на отображение часов — в 12-ти или 24-часовом формате, а остальные параметры формата игнорируются.

Итого

DatePicker и TimePicker предназначены для выбора даты и времени в приложениях .NET MAUI. При этом, TimePicker при работе в Windows имеет свою особенность — любая строка формата времени влияет только на отображение часов в значении времени, а остальные параметры формата игнорируются.