Validate If Value Is in the Correct Format

Environment

Product	Progress® Kendo UI® DatePicker for jQuery	Progress® Kendo UI® DateTimePicker for jQuery
Product 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.

EditPreviewOpen In Dojo

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