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.

      Open In Dojo
        <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>