@page "/"

@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.");
    }
}

<style>
    .control-wrapper {
        max-width: 300px;
        margin: 0 auto;
        padding: 40px 0px 0px;
    }

    .example-label {
        font-size: 14px;
        margin-bottom: 6px;
    }
</style>