Input date format and datepicker
I'm working with HTML5 element input attributes and only Chrome, iOS safari and Opera seem to support it at this time. So I created a jQuery UI datepicker fallback for browsers that don't support it yet, but there are a few issues I am running into and couldn't find answers to them.
- If I insert the date format that the datepickers require and then select a new date, there is an additional yyyy
- I think the yyyy-mm-dd format is laughable and would like it to display as mm / dd / yyyy like chrome, although the value is still yyyy-mm-dd. Is there a way to do this with a datepicker or a better solution?
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.
source to share
Exceptionally, jQuery datepicker does it a little differently, a full year is just yy
, so it yyyy
gets you a full year twice.
Here's a list of date formats -> http://api.jqueryui.com/datepicker/#utility-formatDate
Note that this y
is a two-digit year and yy
a four-digit year.
To show a datepipe with one format and send a different format, you must use an option altField
and another input that contains an alternative value.
This is the input you will send while you show the original input to the user.
To set this for the native datepicker, you would 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);
});
}
source to share