Events in .NET MAUI Date Picker (SfDatePicker)

SelectionChanged

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

  • Sender: This contains the SfDatePicker object.

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

    • NewValue : Returns the new selected date.
    • OldValue : Returns the old selected date.
<picker:SfDatePicker x:Name="picker"
                     SelectionChanged="OnDatePickerSelectionChanged">
</picker:SfDatePicker>
this.picker.SelectionChanged += this.OnDatePickerSelectionChanged;

private void OnDatePickerSelectionChanged(object sender, DatePickerSelectionChangedEventArgs e)
{
    var oldDate = e.OldValue;
    var newDate = e.NewValue;
}

Events in dialog mode (SfDatePicker)

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

Opened event

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

  • Sender: This contains the SfDatePicker object.

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

<picker:SfDatePicker x:Name="picker"
                     Opened="OnDatePickerPopUpOpened">
</picker:SfDatePicker>
this.picker.Opened += this.OnDatePickerPopUpOpened;

private void OnDatePickerPopUpOpened(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 SfDatePicker.

  • Sender: This contains the SfDatePicker object.

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

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

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

Closed event

The [Closed]https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerBase.html#Syncfusion_Maui_Picker_PickerBase_Closed event occurs when the picker popup is closed in the SfDatePicker.

  • Sender: This contains the SfDatePicker object.

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

<picker:SfDatePicker x:Name="picker"
                     Closed="OnDatePickerPopUpClosed">
</picker:SfDatePicker>
this.picker.Closed += this.OnDatePickerPopUpClosed;

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

The SfDatePicker 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 SfDatePicker 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 SfDatePicker object.

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

<picker:SfDatePicker x:Name="picker"
                     OkButtonClicked="OnDatePickerOkButtonClicked">
</picker:SfDatePicker>
this.picker.OkButtonClicked += this.OnDatePickerOkButtonClicked;

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

CancelButtonClicked event

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

  • Sender: This contains the SfDatePicker object.

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

<picker:SfDatePicker x:Name="picker"
                     CancelButtonClicked="OnDatePickerCancelButtonClicked">
</picker:SfDatePicker>
this.picker.CancelButtonClicked += this.OnDatePickerCancelButtonClicked;

private void OnDatePickerCancelButtonClicked(object sender, EventArgs e)
{
    // This event cancels the selected item in the Date picker.
}

Commands

SelectionChangedCommand

The SfDatePicker 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 DatePickerSelectionChangedEventArgs as a parameter.

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

AcceptCommand

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

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

DeclineCommand

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

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