Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Date field does not display the value in Chrome browser

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

like image 382
user2617025 Avatar asked Aug 09 '13 23:08

user2617025


People also ask

How do I change date format to MM DD YYYY in Chrome?

Select Settings. In the Date/time formatting settings section of the Settings overlay, use the drop-downs to select your preferences. Use the Dates drop-down to set how dates appear.

How do I make input type date support on all browsers?

Just use <script src="modernizr. js"></script> in the <head> section, and the script will add classes which help you to separate the two cases: if it's supported by the current browser, or if it's not. Save this answer.


1 Answers

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" />
like image 103
Matt Johnson-Pint Avatar answered Sep 21 '22 15:09

Matt Johnson-Pint