Search code examples
kendo-uikendo-datepicker

How to block off a date in Kendo DatePicker


Is there a way to block off a date with the Kendo DatePicker? So if they click open the calendar, and they want to select the 10th of December, I can have that date either disabled or removed ( preferrably disabled ). I don't see any documentation on how to do this.

<div id="datePicker"></div>

$('#datePicker').kendoDatePicker({
   // I need it dynamically done, I don't want to hard code the date. 
   // So if the user clicks it, a request will be handled to send back any dates that are previously taken.
});

Solution

  • For the 10th Dec you can do it like this:

    $("#datepicker").kendoDatePicker({
        value: new Date(2019,11,5),
        disableDates: [new Date(2019,11,10)]
    });
    

    disableDates can be an array or a function. You can use dates or weekday names. please check the documentation in my comment to know more. Please notice that 11 is month 12. Why does the month argument range from 0 to 11 in JavaScript's Date constructor?

    If you would like to use a function here is how:

    disableDates: function (date) {
        var dates = $("#datepicker").data("kendoDatePicker").options.dates;
                    if (your condition) {
                        return true;
                    } else {
                        return false;
                    }
                }