How to validate a date is in the format yyyy-MM-dd using kendo validator?

Question

I have a kendo date picker that is constructed as follows:

$("#date").kendoDatePicker({
    format: "yyyy-MM-dd",
    footer: " ",
    parseFormats: ["MM/dd/yyyy", "dd/MM/yyyy"]
  });

I would like to use the kendo validator to validate that the date contains a valid date in the format of yyyy-MM-dd. I have tried this:

<input type="date" id="date" placeholder="yyyy-mm-dd" name="date" required data-required-msg="Please enter a date." data-date-msg="Please enter a valid date."/>

While the validator does correctly validate the "required" condition, it does not seem to validate that the date is in the correct format or is a valid date. For instance, "abc" passes as a valid date as does 2013-18-85. How can I use the validator to ensure a valid date in the correct format?

score 15 · Accepted Answer · answered Jan 03 '13 at 00:20

15

If you want to validate a date you need to define a rule (no built-in rule).

Try defining:

$("#date").kendoValidator({
    rules: {
        date: function (input) {
            var d = kendo.parseDate(input.val(), "yyyy-MM-dd");
            return d instanceof Date;
        }
    }
});

NOTE: Remember that KendoUI first uses parseFormats option for parsing the date, then converts it to the format option and finally run validations. That's why I use in validation yyyy-MM-dd and not ["MM/dd/yyyy", "dd/MM/yyyy"].

answered Jan 03 '13 at 00:20

OnaBai

40,767
6
96
125

This helped me. It wasn't clear to me (if I've understood correctly) that the parse formats aren't validation formats. – Chris Sep 15 '15 at 11:50
Great solution: In my case, the format can be dynamically changed, so I need a dynamic validation: var datepicker = $("#" + input[0].id).data("kendoDatePicker"); var format = datepicker.options.format;var inputDate = kendo.parseDate(input.val(), format); – Thalles Noce Nov 25 '17 at 15:10
1

@ThallesNoce the solution should work for you as well since this is a dynamic validation: the function is run when there is a change in the date. The only thing that you should need is changing the literal "yyyy-MM-dd" by the a local variable that retrieves the format each time the validation function runs; or a global variable storing the format and computed whenever it changes. – OnaBai Nov 27 '17 at 11:50
Hey @OnaBai, I figured out this later. My problem was a not so good formatted knockoutjs datepicker adaption. It was changing my observable variable format every time and shouldn't. Thanks a million! – Thalles Noce Nov 27 '17 at 13:03

score 4 · Answer 2 · answered Aug 19 '15 at 21:38

The answer is:

<script src="@Url.Content("~/Scripts/kendo/2015.2.805/kendo.aspnetmvc.min.js")"></script>
<script type="text/javascript">
    kendo.ui.validator.rules.mvcdate = function (input) {
        //use the custom date format here
        //kendo.parseDate - http://docs.telerik.com/kendo-ui/api/javascript/kendo#methods-parseDate
        return !input.is("[data-val-date]") || input.val() === "" || kendo.parseDate(input.val(), "@(MvcApplication.AppCulture.DateTimeFormat.ShortDatePattern)") !== null;
    };
</script>

Here is more information: http://docs.telerik.com/kendo-ui/aspnet-mvc/validation

Cheers

This answer is also good as it highlights the need for the check on ["data-val-date"] - without this all other validation fails! — Chris, Sep 15 '15 at 11:51

How to validate a date is in the format yyyy-MM-dd using kendo validator?

2 Answers2

Linked