Disable selection over disabled dates

[Benedikt Neuhold]

Hello,

I want do ask if there is a way, that I can restrict to select a daterange with disabled dates inside. Currently you can select a date before the disabled dates and after them and it is displayed as valid daterange.

For example: I select the 25th of June, which is free, and can now select 7th of July, but there a disabled dates inside (27th - 4th).

Any way I can do it?

Thanks a lot

[UdhayaKumar Duraisamy]

You can validate that the selected date range contains a disabled date using the change event as like in below code snippet. Please refer to the shared sample and documentation for more information.

<ejs-daterangepicker id="datepicker" renderdaycell="onRenderCell" change="onChange" placeholder="Choose a Date Range" width="300px"></ejs-daterangepicker>

 

<script>

 

    var StartDisableDate = new Date(2022, 11, 06, 00, 00, 00);

    var EndDisableDate = new Date(2022, 11, 08, 00, 00, 00);

    function onRenderCell(args) {

        if (args.date >= StartDisableDate && args.date <= EndDisableDate) {

            args.isDisabled = true;

        }

    }

    function onChange(args) {

        if (args.startDate != null && args.endDate != null) {

            if (args.startDate <= StartDisableDate && args.endDate >= EndDisableDate) {

                document.getElementById("datepicker").ej2_instances[0].startDate = null;

                document.getElementById("datepicker").ej2_instances[0].endDate = null;

                alert("! Selected Date Range contains disabled dates");

            }

        }

    }

</script>

[ Reference ]

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DRP_Disable_date_alert-1522580996