New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI DatePicker Selection

The Telerik UI for .NET MAUI DatePicker control enables the application users to quickly and select a date value by providing an API related to date selection.

Setting the Current Date Selection

To define the current date selection, use the Date(DateTime?) property. By default, Date is null.

1. Define the DatePicker and set the Date property.

<telerik:RadDatePicker Date="2020,05,15"
                            SpinnerFormat="yyy-MMM"/>
2. Add the following namespace:

Clearing the Selection through UI

You can enable the removal of the selected value by rendering a Clear button through the IsClearButtonVisible property of the DatePicker:

<telerik:RadDatePicker Date="2020,05,15"
                            IsClearButtonVisible="True" />

Clearing the Selection Programmatically

The DatePicker for .NET MAUI allows you to clear the selected date through its ClearSelection method.

1. Define the DatePicker and set the method:

<StackLayout>
    <Button Text="Clear Selection" Clicked="OnClearSelectionClicked"/>
    <telerik:RadDatePicker x:Name="datePicker"/>
</StackLayout>

2. Add the following namespace:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

3. Call ClearSelection inside the button click event. As a result, the Date property will be updated to null.

private void OnClearSelectionClicked(object sender, EventArgs e)
{
    this.datePicker.ClearSelection();
}

Modifying the Selection

The DatePicker exposes a SelectionChanged event, which is raised when the user picks a date value.

1. Set the SelectionChanged event.

<telerik:RadDatePicker SelectionChanged="RadDatePicker_SelectionChanged"/>

2. Add the following namespace:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

3. Add the SelectionChanged event, where the sender is the RadDatePicker instance.

private void RadDatePicker_SelectionChanged(object sender, EventArgs e)
{
    // Implement your logic here.
}

See Also

In this article