Asp.net-mvc – MVC4 DataType.Date EditorFor won’t display date value in Chrome, fine in Internet Explorer

asp.net-mvcasp.net-mvc-4editorfor

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>

Chrome

Internet Explorer

Best Answer

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; }

Related Solutions

Display empty editor for default values using EditorFor

You're looking for the DisplayFormat attribute most likely. Also, unless you're using a DateTime?/Nullable<DateTime> you're probably going to end up with Jan 1 (since there can't be a null value).

If you do decide to use DateTime?/Nullable<DateTime> enforcing a value using [Required] should avoid any issues you're speaking of, so if that was your hesitation I wouldn't be too worried.

As a final alternative, you can override the DateTime.cshtml (or Date.cshtml since you're using the DataType attribtue) template (~/Views/Shared/DisplayTemplates/) and make the textbox empty when populated with default(DateTime). e.g.

@model DateTime
@Html.TextBox(String.Empty, Model == default(DateTime) ? String.Empty : Model)

(Or something along those lines)

The field ‘BirthDate’ must be a date MVC 4, internet explorer 11

I did a full test of your scenario. The error occurs in IE in jquery.validate.js on the following check:

    // http://docs.jquery.com/Plugins/Validation/Methods/date
    date: function( value, element ) {
        return this.optional(element) || !/Invalid|NaN/.test(new Date(value).toString());
    },

For quick prove you can try to write the following in Console in both IE and Chrome:

new Date('01/Jun/2001');

In Chrome you'll get a valid date and in IE invalid.

To fix the issue - change the format in your date picket to a default one "dd/mm/yy":

$('#BirthDate').datepicker({ dateFormat: "dd/mm/yy" });

Best Answer

Related Solutions

Display empty editor for default values using EditorFor

The field ‘BirthDate’ must be a date MVC 4, internet explorer 11

Related Topic