Karthik Chintala Karthik Chintala - 5 months ago 214
Javascript Question

The field date must be a date in mvc in chrome

I'm doing a simple MVC4 Internet application, which allows to add some items to the categories.

Here is what i've done so far.

I've a datepicker in mvc view. The script for the datepicker is like this.

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
dateFormat: 'dd/mm/yy',
minDate: 0

My model property :

[DisplayName("Item DueDate")]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}",ApplyFormatInEditMode = true)]
public DateTime? dtItemDueDate { get; set; }
public char charCompleted { get; set; }

and in my view i've done this:

@Html.TextBoxFor(m => m.dtItemDueDate)
@Html.ValidationMessageFor(m => m.dtItemDueDate)

The error is like this:

The field Item DueDate must be a date.

The strange this is that it does work in IE and mozilla, but doesnot work in Chrome.

I found many posts on SO, but none of them help

Any ideas/suggestions ?


Editor note: This answer is no longer valid, as of jQuery 1.9 (2013) the $.browser method has been removed

According to this post it's a known quirk with Webkit-based browsers.

One solution is to modify jquery.validate.js by finding the function date: function (value, element) and put this code in it:

if ($.browser.webkit) {
    //ES - Chrome does not use the locale when new Date objects instantiated:
    var d = new Date();
    return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
else {
    return this.optional(element) || !/Invalid|NaN/.test(new Date(value));