.NET MAUI TimeSpanPicker Commands

The Telerik UI for .NET MAUI TimeSpanPicker exposes a number of commands for programmatic manipulation of its popup rendering.

TimeSpanPicker Commands

The TimeSpanPicker for .NET MAUI exposes the following commands, which enable you to programmatically manipulate the display of the popup and the clearing of the selected item:

• ToggleCommand(ICommand)—Allows you to show and hide the popup. Used for selecting a time interval.
• ClearCommand(ICommand)—Allows you to clear the displayed time interval.

The following example shows how to set the ToggleCommand and ClearCommand.

1. Define the TimeSpanPicker:

• XAML

<StackLayout>
    <Button Text="Toggle Command" Command="{Binding Source={x:Reference timeSpanPicker}, Path=ToggleCommand}"/>
    <Button Text="Clear Command" Command="{Binding Source={x:Reference timeSpanPicker}, Path=ClearCommand}"/>
    <telerik:RadTimePicker x:Name="timeSpanPicker" />
</StackLayout>

2. Add the namespace:

• XAML

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

OK and Cancel Buttons

Through the popup or the drop-down, users can pick a time. The time value must be confirmed or rejected with the OK or Cancel buttons located in the popup or drop-down.

The TimeSpanPicker allows you to add a custom logic for the Accept and Cancel commands which are executed when the OK or Cancel buttons are clicked.

• AcceptCommand(ICommand)—Defines the command, which confirms the current selection of the picker and closes the popup or drop-down. Use AcceptCommandParameter to pass a parameter to the command execute method.
• CancelCommand(ICommand)—Defines the command, which rejects the current selection of the picker and closes the popup or drop-down. Use CancelCommandParameter to pass a parameter to the command execute method.

You can apply the Accept and Cancel commands for the popup mode by setting the PopupSettings property of the TimeSpanPicker. For the drop-down mode, use the DropDownSettings property.

The following example shows how to set the AcceptCommand and CancelCommand in the PopupSettings. The same is valid for the DropDownSettings.

1. Define the TimeSpanPicker:

• XAML

<VerticalStackLayout>
    <telerik:RadTimeSpanPicker PickerMode="Popup">
        <telerik:RadTimeSpanPicker.PopupSettings>
            <telerik:PickerPopupSettings AcceptCommand="{Binding Accept}"
                                         CancelCommand="{Binding Cancel}"/>
        </telerik:RadTimeSpanPicker.PopupSettings>
            <telerik:RadTimeSpanPicker.BindingContext>
                <local:ViewModel/>
            </telerik:RadTimeSpanPicker.BindingContext>
    </telerik:RadTimeSpanPicker>
</VerticalStackLayout>

2. Set the ViewModel:

• C#

public class ViewModel
{
    public ICommand Accept { get; set; }
    public ICommand Cancel { get; set; }

    public ViewModel()
    {
        this.Accept = new Command(this.OnAccept);
        this.Cancel = new Command(this.OnCancel);
    }

    private void OnAccept(object obj)
    {
        // implement your custom logic here
    }

    private void OnCancel(object obj)
    {
        // implement your custom logic here
    }
}

3. Add the following namespace:

• XAML

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