kendoValidator() causes “The field xxx must be a date” error when using DatePicker

Question

Im my MVC5 application selecting date in "dd/MM/yyyy" format causes "The field xxx must be a date" error. On the other hand, if I comment kendoValidator() line as below the error has gone, but in that case I cannot perform client side validation and for this reason I want to use kendoValidator. Here are the code sections related to this control.

Entity:

[Required(ErrorMessage = "Required field")]
[Display(Name = "Start Date")]
public DateTime StartDate { get; set; }

View:

...    
<script src="~/Scripts/kendo/2014.3.1119/cultures/kendo.culture.de.min.js"></script>
<script src="~/Scripts/kendo/2014.3.1119/messages/kendo.messages.de-DE.min.js"></script>

<script>
    $(function () {
        $("form").kendoValidator(); //This line cause the error...
    });
</script>

@Html.LabelFor(m => m.StartDate )
    @(Html.Kendo().DatePickerFor(m => m.StartDate)
    .Animation(true)
    .Culture("de-DE")
    .Footer(false)
    .Format("dd/MM/yyyy")
    .Value(DateTime.Today) 
 )

Is there any missing or wrong definition on Entity or View? i.e.

[DataType(DataType.Date)]

Thanks in advance for your help...

This might be useful / related - http://stackoverflow.com/a/14131337/3130094 — Jamie Dunstan, Feb 19 '15 at 10:45
@JamieDunstan Thanks but it did not solve my problem. Any idea? — Jack, Feb 19 '15 at 11:46

score 8 · Accepted Answer · answered Feb 19 '15 at 12:05

You can try this as a possible solution:

1) If you want to apply the de-DE culture to the entire site then you could add:

<script type="text/javascript">
    kendo.culture("de-DE");
</script>

Substituting the culture for the one you want to apply and also ensuring you have added the appropriate culture script to the page.

2) The next thing you could try is add the date format you want to the allowed date formats "parseFormats" for the control.

This can be done like this:

  @(Html.Kendo().DatePickerFor(m => m.StartDate)
                .Format("dd/MM/yyyy")
                .ParseFormats(new List<string>()               
                              {
                                "dd/MM/yyyy", 
                                "dd/MM/yy",
                                "dd MMM yyyy" 
                              })
   )

These are generally the ways that I go about handling the dates and validating.

Thanks a lot for reply. Applying just the first step have solved the problem :) — Jack, Feb 19 '15 at 13:56
Thank you so much, the parseFormats call saved the day for me. I never noticed it before... — Maxim Gershkovich, Dec 20 '15 at 16:58

score 2 · Answer 2 · edited May 23 '17 at 12:15

2

See this Q&A for a way to solve it by adding in custom validation and not having to fix the culture.

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

edited May 23 '17 at 12:15

Community

1
1

answered Sep 15 '15 at 11:52

Chris

3,081
3
32
37

Thanks for help. Voted+ – Jack Sep 17 '15 at 06:28

score 2 · Answer 3 · answered Oct 22 '18 at 14:07

Try this below code with jQuery unobtrusive.

(function ($, kendo) {
            $.extend(true, kendo.ui.validator, {
                rules: {
                    mvcdate: function (input) {
                        if (input.is("[data-val-date]") && input.val() !== "") {
                            return kendo.parseDate(input.val()) !== null || kendo.parseDate(input.val(), "dd-MMM-yyyy") !== null || kendo.parseDate(input.val(), "dd-MM-yyyy") !== null  || kendo.parseDate(input.val(), "dd/MMM/yyyy") !== null;
                        }

                        return true;
                    }
                },
                messages: {
                    mvcdate: function (input) {
                        return input.attr("data-val-date");
                    }
                }
            });
        })(jQuery, kendo);

kendoValidator() causes “The field xxx must be a date” error when using DatePicker

3 Answers3

Linked