MVC4 DataType.Date EditorFor won't display date value in Chrome, fine in Internet Explorer
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; }
In MVC5.2, add Date.cshtml to folder ~/Views/Shared/EditorTemplates:
@model DateTime?
@{
IDictionary<string, object> htmlAttributes;
object objAttributes;
if (ViewData.TryGetValue("htmlAttributes", out objAttributes))
{
htmlAttributes = objAttributes as IDictionary<string, object> ?? HtmlHelper.AnonymousObjectToHtmlAttributes(objAttributes);
}
else
{
htmlAttributes = new RouteValueDictionary();
}
htmlAttributes.Add("type", "date");
String format = (Request.UserAgent != null && Request.UserAgent.Contains("Chrome")) ? "{0:yyyy-MM-dd}" : "{0:d}";
@Html.TextBox("", Model, format, htmlAttributes)
}
As an addition to Darin Dimitrov's answer:
If you only want this particular line to use a certain (different from standard) format, you can use in MVC5:
@Html.EditorFor(model => model.Property, new {htmlAttributes = new {@Value = @Model.Property.ToString("yyyy-MM-dd"), @class = "customclass" } })