The field must be a date - DatePicker validation fails in Chrome - mvc

Question

I have strange problem. My date validation doesn't work in Chrome. I've tried this answer but it didn't work for me.

I have this in my model:

[Display(Name = "Date")] [DataType(DataType.Date)] public DateTime Date { get; set; } 

My View:

<div class="editor-field"> @Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" }) @Html.ValidationMessageFor(model => model.Item.Date) </div>  $(document).ready(function () {     $('.picker').datepicker({         dateFormat: 'dd.mm.yy',         changeMonth: true,         changeYear: true,         selectOtherMonths: true     }); }); 

Everything works in Opera and Firefox but Chrome doesn't like this type of date. I'm constantly getting the following error The field 'Date' must be a date.

Any ideas?

UPDATE

It seems there is a problem when the code is inside a partial view. When I copy that code to a main page, validation works fine.

I'm inserting partial view inside my main View simply like this:

@Html.Partial("_CreateOrEdit", Model) 

And that code above is inside a partial view:

@model Pro.Web.Models.Model  <div class="editor-field"> @Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" }) @Html.ValidationMessageFor(model => model.Item.Date) 

$(document).ready(function () { $('.picker').datepicker({     dateFormat: 'dd.mm.yy',     changeMonth: true,     changeYear: true,     selectOtherMonths: true });  </script> }); 

UPDATE2

It doesn't work after all. Sometimes it works, sometimes not. I clicked a couple of times on dates and sometimes validation passes. For the same date there could be good and wrong validation.

This is output html for date field:

<div class="editor-field"> <input class="picker" data-val="true" data-val-date="The field Date must be a date." data-val-required="The Date field is required." id="date" name="Item.Date" type="text" value="1.1.0001. 0:00:00" /> <span class="field-validation-valid" data-valmsg-for="Item.Date" data-valmsg-replace="true"></span> </div> 

Answer 1

Exact the same situation here (partial view)

I solved it by removing the validation attribute and perform validation at server side:

$('#date').removeAttr("data-val-date");