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

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

In this article