Date in Editing in MVC5 in Chrome does not show correct format

Question

Just start doing MVC. Following the example in this page： Adding Validation in this Getting Started with ASP.NET MVC 5 tutorial.

In the model, there is a date and format as:

using System;
using System.ComponentModel.DataAnnotations;

namespace MvcMovie.Models
{
    public class Movie
    {
        public int ID { get; set; }
        public string Title { get; set; }

        [Display(Name = "Release Date")]
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        public DateTime ReleaseDate { get; set; }
        public string Genre { get; set; }
        public decimal Price { get; set; }
    }
}

The date format is according to this SO Answer. So (using Chorme, Edge and IE) when I in the i) Index page, ii) Details page, or even in the iii) Delete page, I see the date displayed as yyyy-MM-dd (e.g. 1959-04-15 for April 15 in 1959).

But when I go to Edit page, the date is different for different browser.

Chrome: 04/15/1959
Edge: 4/15/1959
IE: 1959-04-15

(When I view source in all 3 browsers, all show 1959-04-15.)

I think the following suggestion (according to the tutorial's description is causing the trouble, but even I remove the following culture specification, the result for all browsers are same.

<system.web>
    <globalization culture ="en-US" />
    <!--elements removed for clarity-->
</system.web>

1. The regional setting in my computer is 'English (Hong Kong SAR)'. Short date is format as d/M/yyyy.
2. Also when i view data in the Local DB, the date shown is '15/4/1959 0:00:00'. Looks like it uses the computer's regional setting.

Can anyone explain why the date is different in Edit mode? Also how to fix for Chrome? I know someone has suggested other methods (like adding a model, file, etc), but I just want to see if there is an easy solution without adding additional file/model. Thanks.

Answer 1

[DataType(DataType.Date)] generates the type="date" attribute when using @Html.EditorFor() which in turn generates the browsers HTML-5 datepicker. type="date" is not supported in IE, which is why you get a textbox only with the date displayed in the specified format.

For a comparison of HTML-5 support across various browsers, refer HTML 5 TEST. Note also that FireFox has only just started supporting type="date".

As for the date being displayed in yyyy-MM-dd format in your Index and Details views, that would be because you are using @Html.DisplayFor() which uses the DataFormatString property of [DisplayFormat] to format the value.

On option in your Index and Details views is to just use

@Model.YourDate.ToString("d") // or what ever format string you want

Another alternative is to change the attribute to

DisplayFormat(DataFormatString = "{0:d}")]

so that @Html.DisplayFor() generates the correct format, and then in the Edit view, use

@Html.TextBoxFor(m => m.YourDate, "{0:yyyy-MM-dd}", new { type = "date" })

to generate the browsers HTML-5 datepicker.

But if you want a consistent datepicker across all browsers, then you need to use a jQuery plugin (for example jQuery UI).

Note also that the culture on the server has nothing to do with the browsers HTML-5 datepicker, which renders the date in the browsers culture.