Kendo DatePicker fails validation for custom date format

Question

I'm using Kendo DatePicker to edit a Date field being displayed in a Kendo Grid in my ASP.NET MVC 4 project. In order to have the DatePicker being used for the Date field use custom date format string, I updated the Date.cshtml file under the EditorTemplates folder to the following:

@(Html.Kendo().DatePickerFor(m => m).Format("dd/MM/yyyy"))

By doing that, I managed to have the DatePicker display the format as I want it to. However, it failed validation for some of the dates entered for input, either via manual key in or selection from the popup calendar.

Upon further investigation, I can say that the DatePicker is validating the date based on a M/d/Y format. That assumption was made based on my foundings that 12/1/2012 is a valid date, whereas 13/1/2012 is not.

I also tried adding .ParseFormat("dd/MM/yyyy") to the end of the DatePicker declaration in Date.cshtml but it does not fix anything. So I would say that this is definitely a bug and I will report this to Telerik later.

But for the time being, I'm looking for a workaround to have this working. I find that I can override kendo.ui.validator.rules.mvcdate in Javascript to have my own validation function. While this work fine in Chrome, it does not work in IE9.

So, any ideas how I can make the DatePicker to accept dd/MM/yyyy input format? Thanks in advance.

Answer 1

Internally, the date validation rule for ASP.NET MVC (the unobtrusive client validation), uses kendo.parseDate(string) method, which internally will use the predefined date patterns if no format/s is/are defined. I suppose that in your case the default culture is "en-US" and that is why validation fails, because dates with "dd/MM/yyyy" format are considered as not valid. One possible solution is to override the date validation rule (as you did) and parse the string using a specific format. The other option is to set diff culture settings for the page. For instance, the short date format for the "de-DE" culture is "dd/MM/yyyy".

Answer 2

I use this method and it is working fine..

Add these two lines in your page..

<script src="@Url.Content("~/Scripts/jquery.validate.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script>

Then override the jQuery date validation method..

<script>
    $(document).ready(function () {
        kendo.culture("en-MY"); //your culture
        $.validator.addMethod('date',
           function (value, element) {
               return this.optional(element) || kendo.parseDate(value)
           });
    });
</script>

Meanwhile in my Web.config I have this...

<system.web>
    <globalization uiCulture="en-MY" culture="en-MY"></globalization>
</system.web>

Answer 3

  [DataType(DataType.Date)]
  [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
  [Required(ErrorMessage = "Pick a date from Kendo Date Picker")]
   public DateTime mydate{ get; set; }

    @(Html.Kendo().DatePickerFor(m=>m.mydate)
                .Name("MyDate")
                .Format("dd/MM/yyyy")
                 .ParseFormats(new string[] {"dd/MM/yyyy"}))

/Add script document.ready function/

     $(document).ready(function () { kendo.culture("en-GB");

         $.validator.methods['date'] = function (value, element) {
    var check = false;
    var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
    if (re.test(value)) {

        var adata = value.split('/');
        var dd = parseInt(adata[0], 10);

        var mm = parseInt(adata[1], 10);
        var yyyy = parseInt(adata[2], 10);
        var xdata = new Date(yyyy, (mm - 1), dd);

        if ((xdata.getFullYear() == yyyy) && (xdata.getMonth() == (mm - 1)) && 
            (xdata.getDate() == dd)) {

            check = true;
        }
        else {
            alert(value);
            check = false;
        }

    } else
        check = false;
    return this.optional(element) || check;
}

});

Answer 4

I changed the date validation rule:

$.validator.methods.date = function (value, element) {
    return this.optional(element) || /^\d\d?-\w\w\w-\d\d\d\d/.test(value);
};

My format is slightly different than yours but you should be able to modify this.

Answer 5

I had the same issue when using the Gantt component here. Telerik support put me on the right lines by referring me to here.

My crucial omission was that I had not included the following in my _Layout.vbhtml file:

<script>
kendo.culture("en-GB");
</script>

Once included (together with the appropriate kendo.culture script in my JS bundle) the helper started behaving as expected.

Answer 6

The simple answer is don't use a custom date format. Just always do .Format("MM/dd/yyyy") explicitly and do not use "dd/MM/yyyy" ("yyyy-MM-dd" or "MMM d, yyyy" might be ok). And set your web server to use US regional settings in the control panel or in Web.config.

Now for an explanation of the problem and how to actually make dd/MM/yyyy work:

Kendo date validation uses the default kendo culture date format kendo.culture().calendar.patterns.d (and .t for time). If you set this directly or apply a different culture, that sets the date format being validated against. It uses kendo.parseDate so something like "MMM d, yyyy" will be fine but something like "dd/MM/yyyy" will fail validation if d > 12 and the default US culture is being used (see kendo Globalization demo for how to switch cultures).

The reason this happens is because DatePicker.Format(...) is slightly broken. It is a bug in kendo.aspnetmvc.js which provides an alternate date validation function which ignores the DatePicker format and just runs parseDate using the current culture date format. This is the fixed javascript:

    date: function(input) {
        var dp = input.data("kendoDatePicker") || input.data("kendoDateTimePicker");
        if (dp != undefined) {
            return input.val() === "" || kendo.parseDate(input.val(), dp.options.format) !== null;
        }

        return input.val() === "" || kendo.parseDate(input.val()) !== null;
    },

Also, there is a minor bug in the date validator function in kendo.validator.js/kendo.web.js which makes date validation on grids in Internet Explorer always fail.

Also, make sure your web server globalization is set to US to match kendo culture (in Web.config or in the Windows Regional Control Panel). Firefox posts MM/dd/yyyy and the web server needs to match it. Also, the web server regional date format is applied to all client browsers if you do not specify DatePicker.Format explicitly. So if your web server has Canadian/British date formats set in the control panel for Windows, kendo grid DatePickers default to dd/MM/yyyy then error in the validation and again when firefox posts to the web server (kendo default culture under firefox posts MM/dd/yyyy so if your web server expects dd/MM/yyyy, mvc date binding fails).

Note: If you prefer to use the non-mvc date validator: Remove the data-val-date attribute. Add: data-type=\"date\" data-format=\"dd/MM/yyyy h:mm:ss tt\". I believe this is not possible using the html helper. You have to specify the html and javascript directly.

Note: Non-grid DatePickers seem to have no validation due to lacking the "data-val-date" attribute.

Also: "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"]." - How to validate a date is in the format yyyy-MM-dd using kendo validator?

Globalization Line for Web.config:

<globalization requestEncoding="utf-8" responseEncoding="utf-8" culture="en-US" uiCulture="en-US" />