Edit this page

Prevent Invalid Values

The following example demonstrates how to prevent invalid values in a Kendo UI DateTimePicker.

Example
  <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() {
          $(".console").append("<p>Change :: " + kendo.toString(this.value(), 'd') + "<p>");

          //uncomment if you do not want to wire the input change event
          /*if (this.value() === null) {
                       this.value("");
                      }*/
        }

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

        //if you don't want to use widget change event
        $("#datetimepicker").on("change", function() {
          var input = $(this);
          var widget = input.data("kendoDateTimePicker");

          if (widget && widget.value() === null && input.val()) {
            widget.value("");
          }
        });
      });
    </script>            
  </div>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy