Date displays options in Asp.Net MVC
I have a DateTime field in my model in a .Net MVC4 application. I would like the Edit view to display the date value, presenting the user with the option to use the calendar control.
Adding an attribute [DisplayFormat(DataFormatString = "{0:d}",ApplyFormatInEditMode = true)]
shows the user the current value as a text field:
The addition [DataType(DataType.Date)]
shows "mm / dd / yyyy" and hides the current value:
and provides a nice calendar widget when the down arrow is selected:
Is there a way to combine this functionality so that the user can see the currently selected date and calendar widget?
Refresh
This is browser behavior. The markup generated 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.
source to share
IE9 renders this markup by showing date without widget
IE9 doesn't support data entry at all, so you can forget about any widgets in this web browser. Even IE10 doesn't support it :-) Please take a look at following article
to view web browsers that support HTML5 date input. All other browsers that don't support it will just display a standard textbox without any widgets for picking date and time.
whereas Chrome hides the date.
HTML specification
states that the attribute value
of the date input field should be used RFC 3339 format
to show this default:
<input id="Date" name="Date" type="date" value="2013-02-17" />
If it value
uses a different format, this value will not be displayed by default.
So make sure you respect the spec if you don't want to get undefined behavior:
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
and then you get the expected output:
source to share