Posted by Dimitris Tsakoumagos on 2/19/2014 5:54 PM | Comments (0)

Today I received a customer requirement stating that he wanted to choose the year only, using a DatePicker control. Our default DatePicker control shows a date in the dd/MM/yyyy format. Also, the drop-down calendar is configured to choose a specific day, making it quite cumbersome to select the required year.

Default DatePicker control

In order to simulate the requested behaviour, I had to make the following changes, using the form's Load Completed script. As a reference, my DatePicker control is called c_myYear:

kendo.culture().calendar.patterns.g = "yyyy";
var c1 = form.GetControl("c_myYear").InputControl;
$(c1.CTRL).data("kendoDatePicker").destroy();
$(c1.CTRL).kendoDatePicker({ start: "decade", depth: "decade", format: "yyyy" });
c1.BindEvents();

The new, Year only, DatePicker control

 

Similarly, in order to have a Month-Year calendar only:

kendo.culture().calendar.patterns.g = "yyyy";
var c1 = form.GetControl("c_myYear").InputControl;
$(c1.CTRL).data("kendoDatePicker").destroy();
$(c1.CTRL).kendoDatePicker({ start: "year", depth: "year", format: "MMMM yyyy" });
c1.BindEvents();

The Month-Year calendar

Comments are closed