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

Validate If Value Is in the Correct Format

Environment

Product Progress Kendo UI DatePicker Progress Kendo UI DateTimePicker
Progress Kendo UI version Tested up to version 2017.3.1026

 

Description

How can I validate whether the input of the user in the DatePicker is in the correct format?

Solution

Use the Kendo UI Validator and create a custom validation rule which validates the format of the date.

    <h2>Use client-side validation:</h2>
    <form id="form">
      <input data-role="datepicker"
             name="date"
             data-bind="value: selectedDate"
             id="date"
             style="width: 20%">
      <span class="k-invalid-msg" data-for="date"></span>
    </form>

    <script>


      $(function () {

        var viewModel = kendo.observable({
          selectedDate: new Date(),

        });
        kendo.bind($("#form"), viewModel);


        $("#form").kendoValidator({
          rules: {
            // Implement your custom date validation.
            dateValidation: function (input, params) {

              if (input.is("[name='date']") && input.val() != "") {
                input.attr("data-datevalidation-msg", "Not a valid date in MM/dd/yyyy format!");

                var date = kendo.parseDate(input.val(), "MM/dd/yyyy");
                if (date) {
                  return true;
                }
                return false;
              }
              return true;                    
            }
          },
          messages: { //custom rules messages
            datevalidation: function (input) {
              // Return the message text.
              return input.attr("data-val-datevalidation");
            }
          }
        });
      })
    </script>

See Also

In this article
Not finding the help you need? Improve this article