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

Validate Custom Dates in the DateTimePicker


Product Progress® Kendo UI® DateTimePicker for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I create custom date validation in the Kendo UI for jQuery DateTimePicker?


The following example demonstrates how to achieve the desired scenario.

  <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>

      $(document).ready(function () {
        // Create DateTimePicker from the input HTML element.
          value:new Date(),
          parseFormats: ["MM/dd/yyyy"]

        var validator = $("#example").kendoValidator({
          rules: {
            datepicker: function(input) {
              if ("[data-role=datetimepicker]")) {
              } else {
                return true;
          messages: {
            datepicker: "Please enter valid date!"
    <style scoped>
      #to-do {
        height: 52px;
        width: 221px;
        background: url('../content/web/datepicker/todo.png') transparent no-repeat 0 0;

See Also

In this article