How can I show a date on a kendo datepicker which is less than min date or greater than max date

Question

How can I set a date (e.g. 1/1/2012) on a kendo datepicker which is less than min date (e.g. 1/1/2013) or greater than max date (e.g. 1/1/2014) defined in the datepicker options?

My requirement is to restrict the user's selection to the range between min and max, but I want the datepicker to show values that are outside of that range (e.g. if the value is overridden in the database).

You need to be able to choose a date before 1/1/1900 or after 11/31/2099 ? — Robin Giltner, Dec 24 '13 at 14:30
need to display invalid date ( ex. 1/1/2012) which not fall between min date (1/1/2013) and max date (1/1/2014) of kendo date picker. — user2257028, Dec 26 '13 at 07:47
How did you resolve this issue? I have the same problem now. When user selects, want to restrict the dates to min - max, but need to be able to display for any dates. — Ning, Nov 20 '19 at 03:09

Lars Höppner · Answer 1 · 2013-12-28T01:37:05.943

If you create a datepicker with min and max options like this:

var datePicker = $('#input').kendoDatePicker({
    min: new Date(2013, 0, 1),
    max: new Date(2013, 11, 31)
}).data("kendoDatePicker");

then you can't set a value outside of that date range. You could either create your own widget, or you could remove the min/max restrictions temporarily for setting your value:

// temporarily remove the restrictions
var min = datePicker.options.min;
var max = datePicker.options.max;
datePicker.options.min = new Date(1900, 0, 1);
datePicker.options.max = new Date(2099, 11, 31);
// set your date which may be outside of the range specified by min/max
datePicker.value(new Date(2009, 0, 1));
// restore the min/max options so the user still can only choose within the range
datePicker.options.min = min;
datePicker.options.max = max;

score 0 · Answer 2 · answered Dec 26 '13 at 16:31

So you need to be able to select an invalid date in the datepicker, but display an error message if it is an invalid date.

Sounds like you need a kendo validator widget for your datepicker. Kendo docs for validator http://docs.kendoui.com/api/framework/validator

JSbin sample http://jsbin.com/itiqaDU/1/edit

How can I show a date on a kendo datepicker which is less than min date or greater than max date

2 Answers2