MVC4 DataType.Date EditorFor won't display date value in Chrome, fine in Internet Explorer

asp.net-mvc, asp.net-mvc-4, editorfor

Solution

When you decorate a model property with `[DataType(DataType.Date)]` the default template in ASP.NET MVC 4 generates an input field of `type="date"`:

<input class="text-box single-line" 
       data-val="true" 
       data-val-date="The field EstPurchaseDate must be a date."
       id="EstPurchaseDate" 
       name="EstPurchaseDate" 
       type="date" value="9/28/2012" />

Browsers that support HTML5 such Google Chrome render this input field with a date picker.

In order to correctly display the date, the value must be formatted as `2012-09-28`. Quote from the specification:

value: A valid full-date as defined in [RFC 3339], with the additional qualification that the year component is four or more digits representing a number greater than 0.

You could enforce this format using the `DisplayFormat` attribute:

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public Nullable<System.DateTime> EstPurchaseDate { get; set; }

Problem

I'm using the DataType.Date attribute on my model and an EditorFor in my view. This is working fine in Internet Explorer 8 and Internet Explorer 9, but in Google Chrome it is showing a date picker and instead of displaying the value it just displays "Month/Day/Year" in faded gray text. Why won't Google Chrome display the value? Model: ``` [DataType(DataType.Date)] public Nullable<System.DateTime> EstPurchaseDate { get; set; } ``` View: ``` <td class="fieldLabel">Est. Pur. Date</td> <td class="field">@Html.EditorFor(m=>m.EstPurchaseDate)</td> ```

Original source