Setting Global Min and Max DatePicker Values
Environment
Product | Progress® Kendo UI® DatePicker for jQuery | Product Version | 2018.3.911 |
Description
How can I change globally the min and max values for all Kendo UI DatePickers?
Solution
To globally set the min
and max
configurations for all Kendo UI DatePickers, add the following script.
<script>
kendo.ui.DatePicker.fn.options.max = new Date(3999, 11, 31);
kendo.ui.DatePicker.fn.options.min = new Date(1700, 0, 1);
</script>
The following example demonstrates the implementation of the suggested approach and sets the max value to December 31, 3999 and the min value to January 1, 1700 in two Kendo UI DatePickers.
<script>
kendo.ui.DatePicker.fn.options.max = new Date(3999, 11, 31);
kendo.ui.DatePicker.fn.options.min = new Date(1700, 0, 1);
</script>
<div id="example">
<div class="demo-section k-content">
<h4>Select date</h4>
<input id="datepicker" />
<input id="datepicker1" />
</div>
<script>
$(document).ready(function() {
$("#datepicker").kendoDatePicker();
$("#datepicker1").kendoDatePicker({
// min: new Date() // Will overwrite the global setting.
});
});
</script>
</div>
Notes
If a DatePicker contains its own min or max configuration, the individual settings will prevail over the global values.