New to Kendo UI for jQuery? Download free 30-day trial

Restrict the DatePicker User Input to Min/Max Values

Environment

Product Progress Kendo UI DatePicker for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I restrict user input in the Kendo UI for jQuery DatePicker to minimum or maximum values?

Solution

The following example demonstrates how to restrict user input to minimum or maximum values that are set through the widget configuration.

    <input id="DOB" />
    <script>
      $(function() {
        $("#DOB").kendoDatePicker({
          format: "dd/MM/yyyy",
          value: new Date(2020, 10, 04),
          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

In this article