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)
)
<kendo-datepicker value="DateTime.Today" name="weekend-date-picker" disable-dates-handler="disableWeekend">
</kendo-datepicker>
<script>
function disableWeekend(date) {
if (date) {
var dayOfWeek = date.getDay();
var isWeekend = (dayOfWeek === 6) || (dayOfWeek === 0); // 6 = Saturday, 0 = Sunday
return isWeekend;
}
}
</script>
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")
)
<kendo-datepicker value="new DateTime(2019,1,2)" name="national-date-picker" disable-dates-handler="disableDates">
</kendo-datepicker>
<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>