Restrict User Input to Min/Max Values
The following example demonstrates how to restrict user input to minimum or maximum values that are set through the widget configuration.
Example:
<input id="DOB" value="30/06/2010" />
<script>
$(function() {
$("#DOB").kendoDatePicker({
format: "dd/MM/yyyy",
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>
See Also
- DatePicker JavaScript API Reference
- How to Set the First Weekday
- How to Create Date Masking
- How to Globally Modify Default Options
- How to Hide the Default Button
- How to Integrate DatePicker with DateJS Library
- How to Make Input Elements Readonly
- How to Persist Entered Dates
- How to Resize Calendar Based on Input Width
For more runnable examples on the Kendo UI DatePicker, browse its How To documentation folder.