.NET MAUI TimeSpanPicker Selection
The TimeSpanPicker control enables users to select a time interval. This topic explains the TimeSpanPicker API related to the time-interval selection.
Time Property
To define the current time-interval selection, use the Time(TimeSpan?) property. The default value is null.
The following example shows how to set the Time property.
Define the TimeSpanPicker.
<telerik:RadTimeSpanPicker Time="5:10:30:00"/>
Add the namespace.
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
Clear Button
You can enable a Clear button which can be used to quickly remove the selected value. To enable the button, set IsClearButtonVisible property of the TimePicker:
<telerik:RadTimeSpanPicker Time="5:10:30:00"
IsClearButtonVisible="True" />
Methods
To cancel the selected time, use the ClearSelection method.
The following example shows how to set the ClearSelection method.
1. Define the TimeSpanPicker.
<StackLayout>
<Button Text="Clear Selection" Clicked="OnClearSelectionClicked"/>
<telerik:RadTimeSpanPicker x:Name="timeSpanPicker"/>
</StackLayout>
2. Add the namespace.
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
3. Call ClearSelection inside the button click event. As a result, the Time property will be updated to null.
private void OnClearSelectionClicked(object sender, EventArgs e)
{
this.timeSpanPicker.ClearSelection();
}
Events
The TimeSpanPicker exposes the SelectionChanged event, which is raised when the user picks a time value.
The following example shows how to set the SelectionChanged event.
1. Define the TimeSpanPicker:
<telerik:RadTimeSpanPicker SelectionChanged="RadTimeSpanPicker_SelectionChanged"/>
2. Add the namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
3. Define the SelectionChanged event where the sender is the RadTimeSpanPicker control:
private void RadTimeSpanPicker_SelectionChanged(object sender, EventArgs e)
{
// implement your logic here
}