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: Display Foramat output

The addition [DataType(DataType.Date)]

shows "mm / dd / yyyy" and hides the current value: DateFormat (DataType.Date) output

and provides a nice calendar widget when the down arrow is selected:
Calendar widget

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.

+3


source to share


1 answer


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:

enter image description here

+6


source







All Articles