Events in .NET MAUI Time Picker (SfTimePicker)

Selection changed event

The SelectionChanged event is used to notify when the time selection is changed onto the view in the SfTimePicker.

  • Sender: This contains the SfTimePicker object.

  • EventArgs: In the SfTimePicker picker, the TimePickerSelectionChangedEventArgs is used for this event which holds the data of NewValue and OldValue.

    • NewValue : Returns the new selected time.
    • OldValue : Returns the old selected time.
<picker:SfTimePicker x:Name="picker"
                     SelectionChanged="OnTimePickerSelectionChanged">
</picker:SfTimePicker>
this.picker.SelectionChanged += this.OnTimePickerSelectionChanged;

private void OnTimePickerSelectionChanged(object sender, TimePickerSelectionChangedEventArgs e)
{
    var oldTime = e.OldValue;
    var newTime = e.NewValue;
}

Events in dialog mode

In SfTimePicker, three events are used while the time picker is in Dialog mode.

Opened event

The Opened event occurs when the picker popup is opened in the SfTimePicker.

  • Sender: This contains the SfTimePicker object.

  • EventArgs: In the SfTimePicker picker, EventArgs is used for this event.

<picker:SfTimePicker x:Name="picker"
                     Opened="OnTimePickerPopUpOpened">
</picker:SfTimePicker>
this.picker.Opened += this.OnTimePickerPopUpOpened;

private void OnTimePickerPopUpOpened(object sender, EventArgs e)
{
    // If you need to open the picker, set the IsOpen property to true.
    this.picker.IsOpen = true;
}

Closing event

The Closing event occurs when the picker popup is closing in the SfTimePicker.

  • Sender: This contains the SfTimePicker object.

  • EventArgs: In the SfTimePicker picker, CancelEventArgs is used to describe a cancel event which holds the bool value.

    • Cancel : Indicating whether you should cancel the operation or not.
<picker:SfTimePicker x:Name="picker"
                     Closing="OnTimePickerPopUpClosing">
</picker:SfTimePicker>
this.picker.Closing += this.OnTimePickerPopUpClosing;

private void OnTimePickerPopUpClosing(object sender, CancelEventArgs e)
{
    //To restrict the time picker get close, set e.Cancel to true.
    e.Cancel = true;
}

Closed event

The Closed event occurs when the picker popup is closed in the SfTimePicker.

  • Sender: This contains the SfTimePicker object.

  • EventArgs: In the SfTimePicker picker, EventArgs is used for this event.

<picker:SfTimePicker x:Name="picker"
                     Closed="OnTimePickerPopUpClosed">
</picker:SfTimePicker>
this.picker.Closed += this.OnTimePickerPopUpClosed;

private void OnTimePickerPopUpClosed(object sender, EventArgs e)
{
    // If you need to close the picker, set the IsOpen property to false.
    this.picker.IsOpen = false;
}

In the SfTimePicker footer view provides two events. These events are not applicable while the footer view is not visible.

OkButtonClicked event

The OkButtonClicked event occurs when the ok button is clicked in the SfTimePicker footer view. This event is not applicable when the footer view is not visible and the ok button is not visible.

  • Sender: This contains the SfTimePicker object.

  • EventArgs: In the SfTimePicker picker, EventArgs is used for this event.

<picker:SfTimePicker x:Name="picker"
                     OkButtonClicked="OnTimePickerOkButtonClicked">
</picker:SfTimePicker>
this.picker.OkButtonClicked += this.OnTimePickerOkButtonClicked;

private void OnTimePickerOkButtonClicked(object sender, EventArgs e)
{
    // This event is used to updates the selected item in the time picker.
}

CancelButtonClicked event

The CancelButtonClicked event occurs when the cancel button is clicked in the SfTimePicker footer view. This event is not applicable when the footer view is not visible.

  • Sender: This contains the SfTimePicker object.

  • EventArgs: In the SfTimePicker picker, EventArgs is used for this event.

<picker:SfTimePicker x:Name="picker"
                     CancelButtonClicked="OnTimePickerCancelButtonClicked">
</picker:SfTimePicker>
this.picker.CancelButtonClicked += this.OnTimePickerCancelButtonClicked;

private void OnTimePickerCancelButtonClicked(object sender, EventArgs e)
{
    // This event is used to cancel the selected item in the time picker.
}

Commands

SelectionChangedCommand

The SfTimePicker includes a built-in event called SelectionChanged that is triggered whenever the selection index in the time picker changes. This event can be invoked through the SelectionChangedCommand, which passes the TimePickerSelectionChangedEventArgs as a parameter.

<picker:SfTimePicker x:Name="picker"
                    SelectionChangedCommand="{Binding SelectionChangedCommand}">
<ContentPage.BindingContext>
    <local:ViewModel/>
</ContentPage.BindingContext>					  
</picker:SfTimePicker>
public class ViewModel
{
    public ICommand SelectionChangedCommand { get; set; }
    public ViewModel()
    {
        SelectionChangedCommand = new Command(SelectionChanged);
    }
    private void SelectionChanged()
    {
        // To do your requirement here.
    }
}

AcceptCommand

The SfTimePicker includes a built-in event called OkButtonClicked, which is triggered when the confirm button is tapped on the time picker. This event can be invoked through the AcceptCommand.

<picker:SfTimePicker x:Name="picker"
                    AcceptCommand="{Binding AcceptCommand}">
<ContentPage.BindingContext>
    <local:ViewModel/>
</ContentPage.BindingContext>					  
</picker:SfTimePicker>
public class ViewModel
{
    public ICommand AcceptCommand { get; set; }
    public ViewModel()
    {
        AcceptCommand = new Command(ActionButtonClicked);
    }
    private void ActionButtonClicked()
    {
        // To do your requirement here.
    }
}

DeclineCommand

The SfTimePicker includes a built-in event called CancelButtonClicked, which is triggered when the cancel button is tapped on the time picker. This event can be invoked through the DeclineCommand.

<picker:SfTimePicker x:Name="picker"
                    DeclineCommand="{Binding DeclineCommand}">
<ContentPage.BindingContext>
    <local:ViewModel/>
</ContentPage.BindingContext>					  
</picker:SfTimePicker>
public class ViewModel
{
    public ICommand DeclineCommand { get; set; }
    public ViewModel()
    {
        DeclineCommand = new Command(ActionButtonCanceled);
    }
    private void ActionButtonCanceled()
    {
        // To do your requirement here.
    }
}