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

    Validate Custom Dates in the DateTimePicker

    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 create custom date validation in the Kendo UI for jQuery DateTimePicker?

    Solution

    The following example demonstrates how to achieve the desired scenario.

    Open In Dojo
      <div id="example">
        <div id="to-do">
          <input id="datetimepicker" name="datetimepicker" style="width:200px;" required />
          <span class="k-invalid-msg" data-for="datetimepicker"></span>
        </div>
    
        <script>
          $(document).ready(function () {
            // Create DateTimePicker from the input HTML element.
            $("#datetimepicker").kendoDateTimePicker({
              value:new Date(),
              parseFormats: ["MM/dd/yyyy"]
            });
    
            var validator = $("#example").kendoValidator({
              rules: {
                datepicker: function(input) {
                  if (input.is("[data-role=datetimepicker]")) {
                    return input.data("kendoDateTimePicker").value();
                  } else {
                    return true;
                  }
                }
              },
              messages: {
                datepicker: "Please enter valid date!"
              }
            }).data("kendoValidator");
          });
        </script>
        <style scoped>
          #to-do {
            height: 52px;
            width: 221px;
            background: url('../content/web/datepicker/todo.png') transparent no-repeat 0 0;
          }
        </style>
      </div>