jquery - 输入类型日期格式和日期选择器问题

Question

我正在处理 HTML5 元素的输入属性，目前似乎只有 Chrome、iOS safari 和 Opera 支持它。因此，我为尚不支持它的浏览器创建了一个 jQuery UI 日期选择器回退，但我遇到了一些问题，但无法找到任何答案。

1. 如果我输入日期选择器要求的日期格式，然后 选择一个新日期，还有一个额外的 yyyy
2. 我认为 yyyy-mm-dd 格式很荒谬，我希望它像 chrome 一样显示为 mm/dd/yyyy，即使值仍然是 yyyy-mm-dd。有没有办法使用日期选择器或更好的解决方案来做到这一点？

Example

JS

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

HTML

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

请在 firefox 中查看日期选择器后备，在 chrome 中查看输入类型日期。

Answer 1

首先，jQuery 的日期选择器的做法略有不同，一整年只是 yy，所以 yyyy 会让你得到整年的两倍。

这是日期格式列表 -> http://api.jqueryui.com/datepicker/#utility-formatDate

请注意，y 是两位数的年份，yy 是四位数的年份。

要使用一种格式显示日期选择器，并提交另一种格式，您需要使用 altField 选项和另一个保存替代值的输入。
这是您将提交的输入，同时您向用户显示原始输入。

要为 native 日期选择器也进行设置，您需要做类似的事情

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

和

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