Prevent Invalid DateTimePicker Values

Environment

Product	Progress® Kendo UI® DateTimePicker for jQuery
Operating System	Windows 10 64bit
Visual Studio Version	Visual Studio 2017
Preferred Language	JavaScript

Description

How can I prevent invalid values in the Kendo UI for jQuery DateTimePicker?

Solution

To achieve the desired scenario:

1. Attach a handler to the change event of the DateTimePicker.

2. Check if the new value of the DateTimePicker is null, which will indicate whether the entered value is invalid or not.

3. Execute any other custom logic.

  <div id="example">
    <div class="demo-section k-header" style="width: 400px;">
      <h4>Select date</h4>
      <input id="datetimepicker" style="width: 200px;"/>
    </div>
    <div class="box">                
      <h4>Console log</h4>
      <div class="console"></div>
    </div>
    <script>
      $(document).ready(function() {
        function onOpen() {
          $(".console").append("<p>Open<p>");
        }

        function onClose() {
          $(".console").append("<p>Close<p>");
        }

        function onChange() {
          // If an invalid value has been entered, the datetimepicker will set its value to null. Use this information to handle the invalid state.
          if (this.value() === null) {
            $(".console").append("<p>Error! Invalid Date! Setting back to the previous date!</p>");
            this.value(lastValidDate);
          } else {
            lastValidDate = this.value();
            $(".console").append("<p>Change :: " + kendo.toString(this.value(), 'd') + "<p>");
          }
        }

        $("#datetimepicker").kendoDateTimePicker({
          change: onChange,
          close: onClose,
          open: onOpen,
          value: new Date()
        });
      });
    </script>            
  </div>

See Also

• Using the API of the DateTimePicker (Demo)
• JavaScript API Reference of the DateTimePicker