Disable Months And Years
Environment
Product Version | 2022.1.119 |
Product | Progress® Kendo UI® DatePicker for jQuery |
Description
The disableDates
configuration provides the functionality to disable certain days in the month view of the DatePicker. This article demonstates how to disable months and years as well.
Solution
- Initialize two arrays that will hold the disabled months and years.
- Attach a handler to the
open
event of the DatePicker. - Inside the
open
event, retrieve a reference to the underlyingCalendar
widget. - Attach a handler to the
navigate
event of theCalendar
. - Perform a conditional check to find out which view is currently open.
- If the
year
view is open, iterate over the array of months. - If the
decade
view is open, iterate over the array of years.
- If the
- Find the corresponding
HTML
element and add thek-disabled
class to manually disable the month or year.
<input id="datepicker" />
<script>
const disabledMonths = ["Jan", "Apr"],
disabledYears = [2020, 2024, 2027];
var datePicker = $("#datepicker").kendoDatePicker({
value: new Date()
}).getKendoDatePicker();
datePicker.one("open", function() {
let calendar = this.dateView.calendar;
calendar.bind("navigate", function(e) {
let view = e.sender.view();
if(view.name === "year") {
for(let i=0; i<disabledMonths.length; i++) {
let month = disabledMonths[i];
calendar.element.find(".k-calendar-td>a:contains("+month+")")
.parent()
.addClass("k-disabled");
}
}
if(view.name === "decade") {
for(let i=0; i<disabledYears.length; i++) {
let year = disabledYears[i];
calendar.element.find(".k-calendar-td>a:contains("+year+")")
.parent()
.addClass("k-disabled");
}
}
});
});
</script>