Question

我正在使用HTML5元素输入属性，目前只有Chrome，iOS Safari和Opera似乎支持它。所以我已经为那些不支持它的浏览器创建了一个jQuery UI datepicker后备，但是我遇到了一些问题并且无法找到任何答案。

如果我输入了datepickers所需的日期格式，那么选择一个新的约会，还有一个额外的yyyy
我认为yyyy-mm-dd格式是荒谬的，并希望它显示mm / dd / yyyy就像chrome一样，即使值仍然是yyyy-mm-dd。有没有办法用datepicker或更好的解决方案来做到这一点？

JS

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

HTML

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

请查看firefox以查看datepicker后备和chrome以查看输入类型日期。

Answer 1

首先，jQuery的datepicker做的有点不同，全年只有yy所以做yyyy可以让你全年两次。

以下是日期格式列表 - ＆gt; 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日期格式。

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

2 个答案: