Chrome displays dd/mm/yyyy in default calendar - instead of actual date within the model

Question

When using [DataType(DataType.Date)] on my model - if it is populated with a value, and I let the "modern" browser show it with its built in calendar, it is never populated with the date.

public class StockPurchase
{
    public int StockPurchaseId { get; set; }
    [Required]
    [Display(Name = "Date of purchase")]
    [DataType(DataType.Date)]
    public DateTime Date { get; set; }
    [Required]
    public decimal Amount { get; set; }

}

Is this a known problem (I'm using Chrome).

Thanks, Mark

Calendar

Ignore me - I found Darin had the answer here: http://stackoverflow.com/questions/12633471/mvc4-datatype-date-editorfor-wont-display-date-value-in-chrome-fine-in-ie — Mark, Jun 25 '14 at 14:33

score 4 · Accepted Answer · answered Jun 25 '14 at 14:37

It's not a "known problem" per se, just an issue with how the HTML5 date control works. Date inputs are expected in ISO 8601 format, which for a date would be YYYY-MM-DD. The format you see, dd/mm/yyyy is localized to make it easier for the user to input the date, but once selected, the browser sets the value in ISO 8601.

The problem is that ASP.NET MVC doesn't set the value in ISO 8601, but rather in the system localized version, which the browser then doesn't understand. The solution is force MVC to set the right value by adding the following attribute to your date property:

[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

The value for the field will then be set at render with the correct ISO 8601 formatted date, and the browser will understand it.

Note: this is yet another reason to use view models instead of your entity directly in your views. More likely than not, you wouldn't actually want your purchase date to always be displayed as YYYY-MM-DD. If you use a create/edit-specific view model for this, you can set the above attribute on the property there, and then a more appropriate version on your actual entity's property, or on the view model specific to displaying the already entered information to the user.

Chrome displays dd/mm/yyyy in default calendar - instead of actual date within the model

1 Answers1