Hide Year Selection from DatePicker and DateTimePicker
Environment
| Product | Progress® Kendo UI® DatePicker for jQuery |
| Product Version | Tested up to version 2017.2 504 |
Description
Can I disable the display of the year in the DatePicker? How can I enable my users to select only a day from a month while I hide from them the option to select the year?
Solution
The Calendar, DatePicker, and DateTimePicker provide configuration options for hiding the year view.
DatePicker
The following example demonstrates how to hide the year view in a Kendo UI DatePicker.
<input id="datepicker" />
<script>
var openFlag = true;
$("#datepicker").kendoDatePicker({
depth: "month",
start: "year",
animation: false,
min: new Date(2017, 0, 1),
max: new Date(2017, 11, 31),
footer: "#: kendo.toString(data, 'm') #",
format: "MM dd",
value: new Date(),
open: function(e) {
var dp = e.sender;
var calendar = dp.dateView.calendar;
if (openFlag) {
calendar.setOptions({
animation: false
});
openFlag = false;
calendar.navigateUp();
}
if (calendar.view().name === "year") {
calendar.element.find(".k-header").addClass("k-hidden");
};
calendar.bind("navigate", function(e) {
var cal = e.sender;
var view = cal.view();
if (view.name === "year") {
cal.element.find(".k-header").addClass("k-hidden");
} else {
var navFast = $(".k-nav-fast");
var dsa = cal.element.find(".k-header").removeClass("k-hidden");
navFast[0].innerText = navFast[0].innerText.slice(0, -5);
}
});
},
close: function(e) {
var calendar = e.sender.dateView.calendar;
calendar.unbind("navigate");
calendar.element.find(".k-header").removeClass("k-hidden");
}
});
</script>
DateTimePicker
The following example demonstrates how to hide the year view in a Kendo UI DateTimPicker in MVVM.
<div id="example">
<input data-role="datetimepicker"
data-bind="value: selectedDate,
events: { open: onOpen, close: onClose}",
data-depth="month",
data-start="year",
min="2017-1-1",
max="2017-12-31",
data-format="MM dd HH:hh",
data-footer="#: kendo.toString(data, 'm') #" />
<script>
var openFlag = true;
var viewModel = kendo.observable({
selectedDate: new Date(),
onOpen: function(e) {
if (e.sender.dateView.calendar) {
var dp = e.sender;
var calendar = dp.dateView.calendar;
if (openFlag) {
calendar.setOptions({
animation: false
});
openFlag = false;
calendar.navigateUp();
}
if (calendar.view().name === "year") {
calendar.element.find(".k-header").css("display", "none");
};
calendar.bind("navigate", function(e) {
var cal = e.sender;
var view = cal.view();
if (view.name === "year") {
cal.element.find(".k-header").css("display", "none");
} else {
var navFast = $(".k-nav-fast");
var dsa = cal.element.find(".k-header").css("display", "block");
navFast[0].innerText = navFast[0].innerText.slice(0, -5);
}
});
}
},
onClose: function(e) {
if (e.sender.dateView.calendar) {
var calendar = e.sender.dateView.calendar;
calendar.unbind("navigate");
calendar.element.find(".k-header").css("display", "block");
}
}
});
kendo.bind($("#example"), viewModel);
</script>
</div>