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

Question

我正在使用HTML5元素输入属性，目前似乎只有Chrome，iOS Safari和Opera支持。因此，我为尚不支持该功能的浏览器创建了jQuery UI datepicker后备，但我遇到了一些问题，但无法为其找到任何答案。

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

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的datepicker所做的有所不同，一整年只是yy，所以yyyy会使您整整两次成为全年。

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

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

要以一种格式显示日期选择器并提交另一种格式，可以使用altField选项，而另一输入保留替代值。这就是您要向用户显示原始输入时要提交的输入。

也要为本地日期选择器设置它，您可以执行类似的操作

<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

Answer 2

这里是我只使用一个输入（不需要隐藏输入）的解决方案。

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

在altFormat中设置要显示给用户的格式，altField是日期字段，dateFormat是HTML5日期格式。