How identify Apply and Cancel event in the DateRange picker?

[Mayur]

I need to identify if the user pressed Apply or Cancel in the SfDateRangePicker component. Is there an event that captures it?

[Priyanka Karthikeyan]

Hi Mayur, 

To better assist you, we would like to inform you that to detect whether the apply or cancel button is clicked within the SfDateRangePicker's  OnOpen  event and utilize JavaScript interop in Blazor. Currently, SfDateRangePicker does not provide direct events for the apply or cancel buttons. However, we can work around this by listening to the OnOpen event and binding click handlers for the Apply and Cancel buttons.

 

 

@using Syncfusion.Blazor.Calendars

@using Microsoft.JSInterop

 

<div class="col-lg-12 control-section">

    <div class="control-wrapper">

        <label class="example-label">DateRangePicker</label>

        <SfDateRangePicker TValue="DateTime?" Placeholder="Choose a range">

            <DateRangePickerEvents TValue="DateTime?" OnOpen="OnOpenHandler" ValueChange="ValueChangeHandler"></DateRangePickerEvents>

        </SfDateRangePicker>

    </div>

</div>

 

@code {

    public void ValueChangeHandler(RangePickerEventArgs<DateTime?> args)

    {

        // Here, you can customize your code.

    }

    [Inject]

    IJSRuntime JsRuntime { get; set; }

    public async Task OnOpenHandler(RangePopupEventArgs args)

    {

        await JsRuntime.InvokeVoidAsync("bindButtonClickEvents");

    }

    [JSInvokable]

    public static void ApplyButtonClicked()

    {

        // Code to handle apply button click

        Console.WriteLine("Apply button clicked");

    }

 

    [JSInvokable]

    public static void CancelButtonClicked()

    {

        // Code to handle cancel button click

        Console.WriteLine("Cancel button clicked.");

    }

}

 

window.bindButtonClickEvents = function () {

    setTimeout(function () {

    var applyButton = document.querySelector('.e-btn.e-apply');

    var cancelButton = document.querySelector('.e-btn.e-cancel');

    if (applyButton) {

        applyButton.addEventListener('click', function () {

            DotNet.invokeMethodAsync('BlazorAppNew1', 'ApplyButtonClicked');

        });

    }

    if (cancelButton) {

        cancelButton.addEventListener('click', function () {

            DotNet.invokeMethodAsync('BlazorAppNew1', 'CancelButtonClicked');

        });

    }

    }, 1000);

};

 

 

We have prepared a sample for your reference. Please review the sample, and if you have any questions or concerns, please get back to us.

 

Regards, 
Priyanka K

Attachment: BlazorAppNew1_4644e9be.zip