.NET MAUI TimeSpanPicker Selection
The TimeSpanPicker control enables users to quickly and easily 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.
-
Define the TimeSpanPicker.
<StackLayout> <Button Text="Clear Selection" Clicked="OnClearSelectionClicked"/> <telerik:RadTimeSpanPicker x:Name="timeSpanPicker"/> </StackLayout>
-
Add the namespace.
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
-
Call
ClearSelection
inside the buttonclick
event. As a result, theTime
property will be updated tonull
.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.
-
Define the TimeSpanPicker.
<telerik:RadTimeSpanPicker SelectionChanged="RadTimeSpanPicker_SelectionChanged"/>
-
Add the namespace.
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
-
Define the
SelectionChanged
event where thesender
is theRadTimeSpanPicker
control.private void RadTimeSpanPicker_SelectionChanged(object sender, EventArgs e) { // implement your logic here }
See Also