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

DatePicker

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

• MaximumDate: максимальная возможная дата, по умолчанию равна 31 декабря 2100

• MinimumDate: минимальная возможная дата, по умолчанию равна 1 января 1900

• Date: выбранная дата - значение структуры DateTime, по умолчанию равна значению DateTime.Today

• Format: определяет формат даты, принимает стандартные для .NET форматы .По умолчанию равен "D" - то есть дата отображается в расширенном формате

Для этого класса также определено событие DateSelected, которое срабатывает при выборе новой даты:

public event EventHandler<DateChangedEventArgs> DateSelected;

В качестве второго параметра обработчик события принимает объект DateChangedEventArgs, у которого можно выделить два свойства: NewDate (выбранная дата) и OldDate (старая дата)

Пример простейшего DatePicker:

namespace HelloApp;

class StartPage : ContentPage
{
    Label label;
    
    public StartPage()
    {
        label = new Label { Text = "Выберите дату" };
        DatePicker datePicker = new DatePicker
        {
            Format = "d",
            MaximumDate = DateTime.Now.AddDays(5),
            MinimumDate = DateTime.Now.AddDays(-5)
        };
        datePicker.DateSelected += DateSelected;
        StackLayout stack = new StackLayout { Children = { label, datePicker }, Padding=20 };
        Content = stack;
    }
    void DateSelected(object sender, DateChangedEventArgs e)
    {
        label.Text = $"Вы выбрали {e.NewDate.ToString("d")}";
    }
}

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

При установке дат в XAML необходимо передавать значение в формате, которое бы будет понятно для DateTime.Parse(). Наиболее простой способ заключается в использовании краткого формата даты "MM/dd/yyyy". Так, аналогичный пример в 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="HelloApp.MainPage">
    <StackLayout Padding="20">
        <Label x:Name="label" Text="Выберите дату"/>
        <DatePicker Format="d" DateSelected="DateSelected">
            <DatePicker.MinimumDate>7/10/2022</DatePicker.MinimumDate>
            <DatePicker.MaximumDate>7/20/2022</DatePicker.MaximumDate>
        </DatePicker>
    </StackLayout>
</ContentPage>

И в этом случае нам надо задать обработчик события выбора даты с файле кода:

namespace HelloApp;

public partial class MainPage : ContentPage
{
	public MainPage()
	{
        InitializeComponent();
    }
    void DateSelected(object sender, DateChangedEventArgs e)
    {
        if (label is { }) 
            label.Text = $"Вы выбрали {e.NewDate.ToString("d")}";
    }
}

TimePicker

TimePicker представляет элемент управления для отображения времени.Среди его свойств можно отметить следующие:

• Time: выбранное время, представляет структуру TimeSpan и по умолчанию равно 0

• Format: определяет формат даты, принимает стандартные для .NET форматы .По умолчанию равен "t" - сокращенная запись времени

Для обработки выбора можно использовать событие PropertyChanged.

Простейший TimePicker:

namespace HelloApp;

class StartPage : ContentPage
{
    Label label;
    TimePicker timePicker;

    public StartPage()
    {
        label = new Label { Text = "Выберите время", FontSize= 20 };
        timePicker = new TimePicker() { Time = new TimeSpan(17, 0, 0) };
        timePicker.PropertyChanged += TimePicker_PropertyChanged;

        StackLayout stack = new StackLayout { Children = { label, timePicker }, Padding=20  };
        Content = stack;
    }

    private void TimePicker_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        if (e.PropertyName == "Time")
        {
            label.Text = $"Вы выбрали {timePicker.Time}";
        }
    }
}

Конкретное отображение TimePickera также будет зависеть от конкретной платформы. Например, на Windos элемент будет выглядеть так:

Создание TimePicker в xaml:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">
    <StackLayout Padding="20">
        <Label x:Name="label" Text="Выберите дату" FontSize="20" />
        <TimePicker x:Name="timePicker" Time="17:00:00" PropertyChanged="TimePicker_PropertyChanged" />
    </StackLayout>
</ContentPage>

И обработка события в файле связанного кода

namespace HelloApp;

public partial class MainPage : ContentPage
{
	public MainPage()
	{
        InitializeComponent();
    }
    private void TimePicker_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        if (e.PropertyName == "Time")
        {
            label.Text = $"Вы выбрали {timePicker.Time}";
        }
    }
}