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>