HTML-5 date field shows as mm dd yyyy in Chrome even when valid date is set

Question

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  quot date quot  attribute value declaration  Now  when viewing in Chrome  my date inputs show up with  quot mm dd yyyy quot  in the input field   Even when I pass in a correctly-formatted date with the value attribute   lt input value  quot 2012 10 02 quot  type  quot date quot   gt   I m still getting  quot mm dd yyyy quot  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  quot 10 01 2012 quot  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  quot 10 01 2012 quot   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

User · Answer

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    lt  10    0          today getDate       var m     today getMonth     1   lt  10    0          today getMonth     1      var y   today getFullYear       var x   String y  -  m  -  d       return x

User · Answer

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                     lt td gt  lt input type  date  id     dd    i   name  dd    gt  lt  td gt                  else                    lt td gt  lt input type  date  value   Model SomeCollection i  date due Value ToString  yyyy-MM-dd    id     dd    i   name  dd    gt  lt  td gt

User · Answer

Had the same problem  A colleague solved this with jQuery Globalize    lt script src   Scripts jquery validate js  type  text javascript  gt  lt  script gt   lt script src   Scripts jquery globalize globalize js  type  text javascript  gt  lt  script gt   lt script src   Scripts jquery globalize cultures globalize culture nl js  gt  lt  script gt   lt script type  text javascript  gt      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           lt  script gt    I am using jQuery Datepicker for selecting the date

User · Answer

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        lt body gt   lt input type  date  id  dt  onchange  mydate1     hidden  gt   lt input type  text  id  ndt   onclick  mydate     hidden   gt   lt input type  button  Value  Date  onclick  mydate       gt   lt  body gt    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

User · Answer

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

[html] HTML-5 date field shows as "mm/dd/yyyy" in Chrome, even when valid date is set

Examples related to html

Examples related to google-chrome