.NET MAUI TimePicker Commands

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

TimePicker Commands

The TimePicker 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 value.
• ClearCommand(ICommand)—Allows you to clear the selected time.

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

1. Define the TimePicker.

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

2. Add the following namespace:

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

   PopupSelector Commands

Through the popup, users can pick a time. The value has to be confirmed or rejected through the OK and Cancel buttons that are displayed in the popup.

The TimePicker allows you to add custom logic for the Accept and Cancel commands, which are executed when the OK and Cancel buttons, respectively, are clicked.

• AcceptCommand(ICommand)—Defines the command which confirms the current selection of the picker and closes the popup.
• CancelCommand(ICommand)—Defines the command which rejects the current selection of the picker and closes the popup.

You can apply the Accept and Cancel commands by using the SelectorSettings property of TemplatedPicker.

The following example shows how to set the AcceptCommand and CancelCommand.

1. Define the TimePicker.

   <telerik:RadTimePicker x:Name="timePicker">
     <telerik:RadTimePicker.PopupSettings>
         <telerik:PickerPopupSettings AcceptCommand="{Binding Accept}"  
                                      CancelCommand="{Binding Cancel}"/>
     </telerik:RadTimePicker.PopupSettings>
   </telerik:RadTimePicker>
   

2. Add the namespace:

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

3. Add a sample ViewModel class.

   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
   }
   }
   

   See Also

• Templates
• Selection