Date displays options in Asp.Net MVC

Question

I have a DateTime field in my model in a .Net MVC4 application. I would like the Edit view to display the date value, while presenting the user an option of using a calendar control.

Adding attribute [DisplayFormat(DataFormatString = "{0:d}",ApplyFormatInEditMode = true)] shows the user the current value as a text field:

Adding [DataType(DataType.Date)] shows "mm/dd/yyyy" and hides the current value:

and provides a nice calendar widget when selecting the down arrow:

Is there a way to combine this functionality, so the user can see the current selected date and the calendar widget?

Update

This is browser behavior. The markup produced by the control contains the current date value:

 <input class="text-box single-line" data-val="true" data-val-date="The field Dining Date must be a date." data-val-required="The Dining Date field is required." id="DiningDate" name="DiningDate" type="date" value="2/15/2013">

IE9 renders this markup by showing the date without the widget, whereas Chrome hides the date.

Answer 1

IE9 renders this markup by showing the date without the widget

IE9 doesn't support the date input at all, so you can forget about any widgets in this web browser. Not even IE10 supports it :-) Please take a look at the following article to see the web browsers that support the HTML5 date input. All other browsers that don't support it will simply display a standard textbox without any datetime picker widget.

whereas Chrome hides the date.

The HTML specification states that the value attribute of a date input field must use the RFC 3339 format in order for this default value to be shown:

<input id="Date" name="Date" type="date" value="2013-02-17" />

If the value uses a different format then this default value won't be shown.

So make sure you respect the specification if you don't want to get undefined behavior:

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

and then you're gonna get the expected result: