Disable Dates from DatePicker

[Farid]

Hello,

I have a scenario when I want to disable special weekdays from  Datepicker so the user can't choose those days.
Currently, the app is using react so is there a way to disable dates for kendo UI Datepicker

[Patrick | Technical Support Engineer, Senior]

Hello Farid,

Based on the question asked within the Kendo UI for jQuery forum, I can help in regards to how to disable special dates for the Kendo UI DatePicker for jQuery.  However, if you were asking a question regarding KendoReact's Datepicker, please create a new forum post within the KendoReact forum.

 

Disabling Special Dates

One way you can achieve this is by setting the disableDates configuration to specific Dates. 

JavaScript

$("#datepicker").kendoDatePicker({
    disableDates: [new Date(2015,9,12), new Date(2015,9,22)]
    //...
});

It can also be passed as a function for a conditional determination of which dates will be disabled.  The Kendo UI DatePicker's Disable dates live demo shows an example of this approach:

JavaScript

        $(document).ready(function() {
            //...

            $("#holidays-date-picker").kendoDatePicker({
                value: new Date(),
                dates: [
                    new Date("1/1/2015"),
                    new Date("1/19/2015"),
                    new Date("2/16/2015"),
                    new Date("4/16/2015"),
                    new Date("5/10/2015"),
                    new Date("5/25/2015"),
                    new Date("6/21/2015"),
                    new Date("7/3/2015"),
                    new Date("9/7/2015"),
                    new Date("10/12/2015"),
                    new Date("11/11/2015"),
                    new Date("11/26/2015"),
                    new Date("11/27/2015"),
                    new Date("12/25/2015")
                ],
                disableDates: function (date) {
                    var dates = $("#holidays-date-picker").data("kendoDatePicker").options.dates;
                    if (date && compareDates(date, dates)) {
                        return true;
                    } else {
                        return false;
                    }
                }
            });

            function compareDates(date, dates) {
                for (var i = 0; i < dates.length; i++) {
                    if (dates[i].getDate() == date.getDate() &&
                        dates[i].getMonth() == date.getMonth() &&
                        dates[i].getYear() == date.getYear()) {
                    return true
                    }
                }
            }
        });

I hope this information helps resolve your issue.  Please let me know if you have any questions regarding the approach.  

Regards,
Patrick | Technical Support Engineer, Senior
Progress Telerik

[Farid]

Thanks.