Alex Rivera | Logout

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

Asked 2013-02-01T13:24:45.620
57

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 i

html google-chrome
Edit
Report

1 Answer

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.

answered 2013-02-01T14:11:24.760

Your Answer