Input type date format and datepicker issues

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.

If I put in the date format that the datepickers requires and then pick a new date, there is an extra yyyy

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.

---

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

链接地址: http://www.djcxy.com/p/18664.html

上一篇: 在html5中输入日期并提示今天

下一篇: 输入类型日期格式和日期选择器问题