We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Disable selection over disabled dates

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



1 Reply

UD UdhayaKumar Duraisamy Syncfusion Team December 15, 2022 11:09 AM UTC

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 ]