Events in .NET MAUI Date Time Picker (SfDateTimePicker)

Selection changed event

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

  • Sender: This contains the SfDateTimePicker object.

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

    • NewValue : Returns the new selected date and time.
    • OldValue : Returns the old selected date and time.
<picker:SfDateTimePicker x:Name="picker"
                         SelectionChanged="OnDateTimePickerSelectionChanged">
</picker:SfDateTimePicker>
this.picker.SelectionChanged += this.OnDateTimePickerSelectionChanged;

private void OnDateTimePickerSelectionChanged(object sender, DateTimePickerSelectionChangedEventArgs e)
        {
            var oldDateTime = e.OldValue;
            var newDateTime = e.NewValue;
        }

Events in dialog mode

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

Opened event

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

  • Sender: This contains the SfDateTimePicker object.

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

<picker:SfDateTimePicker x:Name="picker"
                         Opened="OnDateTimePickerPopUpOpened">
</picker:SfDateTimePicker>
this.picker.Opened += this.OnDateTimePickerPopUpOpened;

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

Closing event

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

  • Sender: This contains the SfDateTimePicker object.

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

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

private void OnDateTimePickerPopUpClosing(object sender, CancelEventArgs e)
        {
            //To restrict the date 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 SfDateTimePicker.

  • Sender: This contains the SfDateTimePicker object.

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

<picker:SfDateTimePicker x:Name="picker"
                         Closed="OnDateTimePickerPopUpClosed">
</picker:SfDateTimePicker>
this.picker.Closed += this.OnDateTimePickerPopUpClosed;

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

The SfDateTimePicker 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 Date Time Picker 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 SfDateTimePicker object.

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

<picker:SfDateTimePicker x:Name="picker"
                         OkButtonClicked="OnDateTimePickerOkButtonClicked">
</picker:SfDateTimePicker>
this.picker.OkButtonClicked += this.OnDateTimePickerOkButtonClicked;

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

CancelButtonClicked event

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

  • Sender: This contains the SfDateTimePicker object.

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

<picker:SfDateTimePicker x:Name="picker"
                         CancelButtonClicked="OnDateTimePickerCancelButtonClicked">
</picker:SfDateTimePicker>
this.picker.CancelButtonClicked += this.OnDateTimePickerCancelButtonClicked;

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

Commands

SelectionChangedCommand

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

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

AcceptCommand

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

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

DeclineCommand

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

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