Setting Global Min and Max DatePicker Values

Environment

Product DatePicker for ProgressĀ® Kendo UIĀ®
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.

In this article
Not finding the help you need? Improve this article