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.