ASP.Net MVC C# Chrome not showing date in edit mode

Sorry to resurrect a 6 month old question, but I was having the same problem and have an answer that I feel is exactly what the OP was looking for.

While answer from mikhairu does work, it requires changing the type to text. The screenshots by the OP show Chrome's inbuilt datepicker UI, which requires the input to be type=date. Chrome requires the value of an input type=date to be in the format of YYYY-MM-DD, presumably to avoid any culture-specific ambiguity.

Therefore, in your model, add this data annotation to your date properties:

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

Try removing [DataType(DataType.Date)] because I believe this creates <input type="date" />. If you do that you'll end up with a <input type="text" /> to which you can attach jQuery date-picker.

Try w3schools: input type date in different browsers to see the difference.

Edit:

In the past I used the following in my View to make this work with jQuery date-picker (if you're interested in using it).

@Html.TextBoxFor(model => model.DateOfBirth, @"{0:yyyy\/MM\/dd}", new { @class = "datepicker" })

To display the date using the default chrome datepicker you need two attributes on your model:

• [DataType(DataType.Date)] results in <input type="date" />. See this answer.
• [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]. The format yyyy-MM-dd is required for the chrome date picker. See this answer.

For example:

Model

public class ObScore{    [DataType(DataType.Date)]    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]    public DateTime Date { get; set; }}

Razor View

<div class="form-group">    @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-2" })    <div class="col-md-10">        @* Control with date picker *@        @Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control" } })        @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })    </div></div>