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

Question

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

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

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 选项和另一个包含替代值的输入。
这是您要提交的输入，同时您向用户显示原始输入。

要为本机日期选择器也进行设置，您需要执行类似

的操作

<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 日期格式。

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

Input type date format and datepicker issues

html

jquery

jquery-ui

datepicker