New to Kendo UI for jQuery? Start a free 30-day trial
Restrict the DatePicker User Input to Min/Max Values
Environment
| Product | Progress® Kendo UI® DatePicker for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I restrict user input in the Kendo UI for jQuery DatePicker to minimum or maximum values?
Solution
The following example demonstrates how to restrict user input to minimum or maximum values that are set through the widget configuration.
<input id="DOB" />
<script>
$(function() {
$("#DOB").kendoDatePicker({
format: "dd/MM/yyyy",
value: new Date(2020, 10, 04),
min: new Date(2000, 10, 10),
max: new Date(2020, 10, 10),
change: onDOBChange
});
});
</script>
<script>
function onDOBChange(e) {
var dt = e.sender;
var value = dt.value();
if (value === null) {
value = kendo.parseDate(dt.element.val(), dt.options.parseFormats);
}
if (value < dt.min()) {
dt.value(dt.min());
}else if (value > dt.max()) {
dt.value(dt.max());
}
}
</script>