4

I have an MVC 4 site using JQuery Mobile. I'm using a model with an EditorFor to render the date editor. in MVC I have this:

@Html.EditorFor(Function(model) model.ActionDate)

The model property is defined as:

<Required>
<RegularExpression("\d{2}/\d{2}/\d{4}", ErrorMessage:="Please enter a date in the format of MM/DD/YY")>
<DataType(DataType.Date)>
<DisplayFormat(ApplyFormatInEditMode:=True, DataFormatString:="MM/dd/yyyy")>
<Display(Name:="Action Date")>
Public Property ActionDate As Date

It renders HTML with the value of:

<input type="date" ... value="04/24/2013" />

But what shows to the user is this:

Date Picker with Date not Showing

The date isn't visible to the user, and the 4/24/2013 is not the default of Chrome's date picker. How do I get chrome to actually show the date?

Thanks.

Matt Johnson-Pint
  • 230,703
  • 74
  • 448
  • 575
Brian Mains
  • 50,520
  • 35
  • 148
  • 257
  • Chrome is doing all sorts of "intelligent" editing for date fields *that are driving us nuts*. My solution (below) was to simply change the field type from `date` to `text` on load. – iCollect.it Ltd Jan 29 '14 at 10:49

2 Answers2

2

According to the W3C, the value passed to an <input type="date"> element should be in RFC3339 format. This is a specific profile of ISO8601.

In other words, you need to pass the value in yyyy-MM-dd format.

Matt Johnson-Pint
  • 230,703
  • 74
  • 448
  • 575
1

Just hit this exact same problem.

My solution was to avoid the type="date" problem by changing the type to text when I connect the datepicker:

$('#Date').removeAttr('type').attr('type', 'text').datepicker();

If you are not using JQueryUI, just drop the datePicker part.

As I also needed to force the default date format (again thanks to Chrome) it was:

$('#Date').removeAttr('type').attr('type', 'text').datepicker({ dateFormat: 'dd/mm/yy' });

Chrome is now biting us regularly with jQueryUI issues and has gone from being our favourite dev browser to our most troublesome (for compatibility issues).

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202
  • Thanks, this perfectly helped me. I'm still confused why the solution of Darin Dimitrov doesn't work for me. Check here http://stackoverflow.com/questions/12633471/mvc4-datatype-date-editorfor-wont-display-date-value-in-chrome-fine-in-ie – jomsk1e Feb 07 '14 at 10:25
  • @jomsk1e: Seems to be an issue with Chrome and jQueryUI datepicker, more than any MVC issue. Still looking for a *correct* solution, but this avoids Chrome being too clever (for now). – iCollect.it Ltd Feb 07 '14 at 10:40