56

I just upgraded an ASP.Net MVC application to MVC-4. The field editor for inputs based on DateTime values now include's the HTML-5 type="date" attribute/value declaration.

Now, when viewing in Chrome, my date inputs show up with "mm/dd/yyyy" in the input field:

date field with 'mm/dd/yyyy' in box

Even when I pass in a correctly-formatted date with the value attribute:

<input value="2012/10/02" type="date"/>

I'm still getting "mm/dd/yyyy" in the input box, which is there until the user manually changes the value.

The problem appears to be with Chrome, and is independent of my back-end framework. See this problem in action: jsFiddle

...big problem for editing records, of course. If the user pulls up a record that already has a valid date, it won't pass validation on submit, unless s/he clicked into the field and reset the value manually.

No problems with the other browsers.

Is this a Chrome bug? Or have I missed something about the way the HTML-5 date field is supposed to work?

UPDATE
See this revise fiddle: http://jsfiddle.net/HudMe/5/ It has both an HTML-4 and an HTML-5 date input, each with "10/01/2012" set as the value on page-load.

Click into either date field. The Javascript should pup up an alert with the value of the field for that element.

Because a valid date has been passed in with the value attribute, this should show "10/01/2012", but in Chrome, for the HTML-5 date field, nothing shows. Reset this value by hand, then click again, and it will now show.

The value from the HTML5 field shows and alerts as expected without adjustment after pageload in Safari, Firefox, IE and Opera.

Note on accepted answer:
For other users of Asp.net mvc-4, you can adjust the display format with the [DisplayFormat] attribute on the DateTime field declaration in your view-model. (found at https://stackoverflow.com/a/12634470/613004 )

Community
  • 1
  • 1
Faust
  • 15,130
  • 9
  • 54
  • 111
  • Distinguish what format the date is *displayed* as and how it's submitted to the server...! What do you receive upon submission? – deceze Feb 01 '13 at 13:26
  • @deceze: As noted, "it won't pass validation on submit" – Faust Feb 01 '13 at 13:31
  • @deceze: anyway, even if this was just a UI-painting trick, i'd still rather have the current value displayed than "mm/dd/yyyy" – Faust Feb 01 '13 at 13:33
  • Please read the solution explained at the following link: [MVC DataType.Date EditorFor won't display date value in Chrome, fine in IE][1] [1]: http://stackoverflow.com/questions/12633471/mvc4-datatype-date-editorfor-wont-display-date-value-in-chrome-fine-in-ie/20858187#20858187 – Blerton Hoxha Dec 31 '13 at 13:51

5 Answers5

65

In chrome to set the value you need to do YYYY-MM-DD i guess because this worked : http://jsfiddle.net/HudMe/6/

So to make it work you need to set the date as 2012-10-01

Ian Boyd
  • 246,734
  • 253
  • 869
  • 1,219
eric.itzhak
  • 15,752
  • 26
  • 89
  • 142
  • 1
    Indeed. Was about to mention this also. See this answer for discussion of the rationale behind the difference between presentation and wire format: http://stackoverflow.com/a/9519493/1972476 – Seán Labastille Feb 01 '13 at 14:21
  • Also: http://stackoverflow.com/a/12634470/613004 shows how to adjust the format with MVCs `[DisplayFormat]` attribute for consumption in `Html.EditorFor() ` – Faust Feb 01 '13 at 14:39
  • Great! For rails folks something like this in application_helper.rb ```def date_for_picker(in_date){ in_date.strftime("%Y-%m-%d") unless in_date.blank? }``` is a quick way to dry this up. – genkilabs Apr 21 '14 at 20:47
  • 1
    Had the same thing, if you are using PHP here is the example `$start = new DateTime($time); $formatedStart = $start->format('Y-m-d');` – woss Aug 26 '14 at 12:37
  • the same answer applies to php or any other language used to fill-in "date" type form field value – 6opko Sep 01 '16 at 11:42
  • In asp.net MVC 5 you need to set the date to "yyyy-MM-dd" not "YYYY-MM-DD" ;-) – juFo Mar 12 '18 at 09:46
  • The documentation of this required format can be found here: https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome – Brian Layman Mar 02 '20 at 22:43
  • It's yyyy-MM-dd not YYYY-MM-DD – Sandeep Ingale Jun 16 '20 at 12:11
3

Had the same problem. A colleague solved this with jQuery.Globalize.

<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.globalize/globalize.js" type="text/javascript"></script>
<script src="/Scripts/jquery.globalize/cultures/globalize.culture.nl.js"></script>
<script type="text/javascript">
    var lang = 'nl';

    $(function () {
        Globalize.culture(lang);
    });

    // fixing a weird validation issue with dates (nl date notation) and Google Chrome
    $.validator.methods.date = function(value, element) {
        var d = Globalize.parseDate(value);
        return this.optional(element) || !/Invalid|NaN/.test(d);
    };
</script>

I am using jQuery Datepicker for selecting the date.

Wim
  • 1,967
  • 11
  • 19
1

I was having the same problem, with a value like 2016-08-8, then I solved adding a zero to have two digits days, and it works. Tested in chrome, firefox, and Edge

today:function(){
   var today = new Date();
   var d = (today.getDate() < 10 ? '0' : '' )+ today.getDate();
   var m = ((today.getMonth() + 1) < 10 ? '0' :'') + (today.getMonth() + 1);
   var y = today.getFullYear();
   var x = String(y+"-"+m+"-"+d); 
   return x;
}
Ricardo Bandala
  • 11
  • 1
0

I have same problem and i found solution which is given below with full datepicker using simple HTML,Javascript and CSS. In this code i prepare formate like dd/mm/yyyy but you can work any.

HTML Code:

    <body>
<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt"  onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />
</body>

CSS Code:

#dt{text-indent: -500px;height:25px; width:200px;}

Javascript Code :

function mydate()
{
  //alert("");
document.getElementById("dt").hidden=false;
document.getElementById("ndt").hidden=true;
}
function mydate1()
{
 d=new Date(document.getElementById("dt").value);
dt=d.getDate();
mn=d.getMonth();
mn++;
yy=d.getFullYear();
document.getElementById("ndt").value=dt+"/"+mn+"/"+yy
document.getElementById("ndt").hidden=false;
document.getElementById("dt").hidden=true;
}

Output:

enter image description here

ashish bhatt
  • 3,091
  • 5
  • 25
  • 23
0

If you are dealing with a table and one of the dates happens to be null, you can code it like this:

  @{
     if (Model.SomeCollection[i].date_due == null)
       {
         <td><input type='date' id="@("dd" + i)" name="dd" /></td>
       }
       else
       {
         <td><input type='date' value="@Model.SomeCollection[i].date_due.Value.ToString("yyyy-MM-dd")" id="@("dd" + i)" name="dd" /></td>
       }
   }
James
  • 53
  • 9