Edit this page

Validate Custom Dates

The following example demonstrates how to create a custom date validation in the DateTimePicker.

Example
  <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 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;
        margin: 30px auto;
        padding: 91px 0 0 188px;
        background: url('../content/web/datepicker/todo.png') transparent no-repeat 0 0;
      }
    </style>
  </div>

See Also

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

Give article feedback

Tell us how we can improve the information

close
Dummy