Limit DateTimePicker Navigation to Months
Environment
| Product | Progress® Kendo UI® DateTimePicker for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I limit the calendar navigation of the Kendo UI for jQuery DateTimePicker to months only?
Solution
The following example demonstrates how to achieve the desired scenario through MVVM.
<input data-role="datetimepicker" />
<script>
$(function() {
kendo.init($(document.body));
var elements = $(document.body).find("[data-role=datetimepicker]");
elements.each(function() {
$(this).data("kendoDateTimePicker")
.bind("open", function() {
var calendar = this.dateView.calendar;
if (calendar) {
calendar.unbind("navigate")
.bind("navigate", function(e) {
var widget = e.sender;
var viewName = widget.view().name;
var disable = viewName == "month" && viewName !== "year";
widget.wrapper.find(".k-nav-fast")
.toggleClass("k-disabled", disable)
.attr("aria-disabled", disable);
})
.trigger("navigate");
}
});
})
});
</script>