Always show calendar, and disable auto apply

[Niki]

Hi. I use the DateRangePicker component with some custom settings, and I have a hard time implementing them, so I would appreciate your help. :)

First, I would like to always show the calendar when I click on the input. With predefined ranges its only showing when the 'Custom range' option is selected, so I managed to achive this by triggering a click on the custom range li element on open:

config.open = (e) => {
    const customRangeOption = daterangepicker.presetElement.querySelector(
        '.e-presets li.e-list-item#custom_range',
    );
    customRangeOption?.click();
    daterangepicker.focusIn();
};

However, I want to be able to click on any of the presets and display them in the calendar, so in this example above, the previous week is selected, so that should be the selected preset.

Also, I would like to prevent the popoup from closing without clicking on the Apply button. so I can only change the value of the input if its confirmed.

Thanks for your help!

Nik

[Priyanka Karthikeyan]

Hi Niki,

We have considered “While choose the presets, need to show the DateRangePicker popup” as a uncertain feature request from our end and logged the report for the same and the fix will be included with any of our upcoming releases.

 

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link:

Feedback Link: https://www.syncfusion.com/feedback/9119/while-choose-the-presets-need-to-show-the-daterangepicker-popup

To prevent the popup from closing, you can set the args.cancel as true inside the OnClose event, as shown below.

<SfDateRangePicker TValue="DateTime?">

    <DateRangePickerEvents TValue="DateTime?" OnClose="OnCloseHandler"></DateRangePickerEvents>

</SfDateRangePicker>

@code{

    public void OnCloseHandler(RangePopupEventArgs args)

    {

        args.Cancel = true;

    }

}

 

Documentation: https://blazor.syncfusion.com/documentation/daterangepicker/events#onclose

Sample: https://blazorplayground.syncfusion.com/LZVztsXeJIfidsyh

 

Regards,

Priyanka K