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.

  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
    }
    

    See Also

In this article
Not finding the help you need?