Disabled Dates

The DatePicker allows you to disable specific days which are not intended to be selected by the end user such as weekends and national holidays.

To disable a date in the DatePicker, use either of the following approaches:

For a complete example, refer to the demo on disabling dates in the DatePicker.

Setting the Weekdays

To disable dates by setting the days of the week, list the names of days that will be disabled.

    @(Html.Kendo().DatePicker()
        .Name("weekend-date-picker")
        .DisableDates(DayOfWeek.Saturday, DayOfWeek.Sunday)
    )

Adding a Function

To disable dates through using a function, set the return value for the date that will be disabled to true.

    @(Html.Kendo().DatePicker()
        .Name("national-date-picker")
        .DisableDates("disableDates")
    )
    <script>
        function disableDates(date) {
            var dates = [
                new Date("1/1/2019"),
                new Date("1/21/2019"),
                new Date("2/18/2019"),
                new Date("5/27/2019"),
                new Date("7/4/2019"),
                new Date("9/2/2019"),
                new Date("10/14/2019"),
                new Date("11/11/2019"),
                new Date("11/28/2019"),
                new Date("12/25/2019")
            ];

            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
                }
            }
        }
    </script>

See Also

In this article
Not finding the help you need? Improve this article