Date field does not display the value in Chrome browser

Question

I am having problem binding date value in Chrome browser.

My razor view defined as follow

<input id="date1" type="text" class="required" value="@Model.Date.ToShortDateString()"  maxlength="10" />

<input id="date2" type="date" class="required" value="@Model.Date.ToShortDateString()"  maxlength="10" />

I ran it under Chrome, the first input display the date value correct. the second input only display mm/dd/yyyy even though a calendar display when I click on the down arrow.

I would like to have the second input field to show the value instead of mm/dd/yyyy

I edited your question. The code you posted was just html and you didn't indent to treat it as code, so it wasn't visible. — Matt Johnson-Pint, Aug 10 '13 at 05:52

score 19 · Answer 1 · answered Aug 10 '13 at 05:58

19

When you use the new <input type="date" ... in HTML5, you need to pass the value in ISO format, which is yyyy-MM-dd. So change your markup to:

<input id="date2" type="date" class="required" value="@Model.Date.ToString("yyyy-MM-dd")"  maxlength="10" />

answered Aug 10 '13 at 05:58

Matt Johnson-Pint

230,703
74
448
575

1

Dear expert, by following your solution how can i show date dd-mm-yyyy in other browser. – karim_fci Sep 01 '14 at 09:53
1

@karim_fci - Sounds like you are asking a different question. Please open a new question instead of asking in comments. Thanks. – Matt Johnson-Pint Sep 01 '14 at 20:42

Date field does not display the value in Chrome browser

1 Answers1

Linked