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

In order 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 sample demonstrates the approach above by setting the max value to December 31, 3999 and the min value to January 1, 1700 for 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 global setting
          });
        });
      </script>            
    </div>

Notes

If a DatePicker contains its own min or max configuration, it will have higher precedence than the global value.

See Also

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