Input type date format and datepicker issues

Question

I'm working with HTML5 elements input attributes and only Chrome, iOS safari and Opera seem to support it at this time. So I have created a jQuery UI datepicker fallback for browsers that do not support it yet, but there are a few issues I'm running into and haven't been able to find any answers for.

1. If I put in the date format that the datepickers requires and then pick a new date, there is an extra yyyy
2. I think the yyyy-mm-dd format is ridiculous and would like it be displayed mm/dd/yyyy like chrome does even though the value is still yyyy-mm-dd. Is there a way to do this with datepicker or a better solution?

Example

JS

if (!Modernizr.inputtypes.date) {
  $('input[type=date]').datepicker({
    dateFormat: 'yyyy-mm-dd' // HTML 5 
  });
}

HTML

<input type="date" value="2014-01-07" />

Please look in firefox to view the datepicker fallback and chrome to view the input type date.

Solution 1

Firsly, jQuery's datepicker does it a little differently, a full year is just yy so doing yyyy gets you the full year twice.

Here's a list of the date formats -> http://api.jqueryui.com/datepicker/#utility-formatDate

Note that y is a two-digit year, and yy is a four digit year.

To show the datepicker with one format, and submit a different format, you'd use the altField option and another input that holds the alternative value.
That's the input that you'll submit, while you're showing the user the original input.

To set that up for the native datepicker as well, you'd do something like

<input type="date" id="date" />
<input type="hidden" id="alternate" />

and

if (!Modernizr.inputtypes.date) {
    $( "#date" ).datepicker({
        dateFormat : 'mm/dd/yy',
        altFormat  : "yy-mm-dd",
        altField   : '#alternate'
    });
} else {
    $('#date').on('change', function() {
        $('#alternate').val(this.value);
    });
}

FIDDLE

Solution 2

Here is the solution I came to to use only one input (no need of a hidden input).

$('input[type="date"], input[type="datetime"]').datepicker({
    dateFormat: 'yy-mm-dd', 
    altFormat: 'dd.mm.yy', 
    altField: $(this)
});

In the altFormat set the format you want to show your user, altField is your date field, dateFormat is the HTML5 date format.

Comments

[adeneo]

To change the datepickers format, just change the dateFormat property? As for the native date input, I don't think you can change that, it's up to the browser and it will generally use the local date settings on your computer.

[GSaunders]

Right as you can see I have the dateFormat property, but I was wondering if there is a way to have the value be yyyy-mm-dd and the display mm/dd/yyyy

[adeneo]

In the jQuery datepicker? Yes there is, is that what you're asking, how to show something and let the submitted value be something else ?

[GSaunders]

Yes I would like the submitted value to be yyyy-mm-dd and the display to be mm/dd/yyyy

[GSaunders]

This is an elegant solution. Thanks!

[adeneo]

@GSaunders - you're welcome, unfortunately I think a second input is the only way to show one format, and submit another, and that's the way it's usually done, so I hope it works out for you.

[Roko C. Buljan]

OBSOLETE: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…