输入类型日期格式和datepicker问题 [英] Input type date format and datepicker issues

问题描述

我正在使用HTML5元素输入属性，只有Chrome，iOS safari和Opera似乎在此支持它。所以我已经为不支持它的浏览器创建了一个jQuery UI datepicker回退，但是我遇到了一些问题，还没有找到任何答案。

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.

1. 如果我输入datepickers需要的日期格式，然后
   选择一个新的日期，则会有一个额外的yyyy


2. 我认为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 fallback和chrome以查看输入类型日期。 >

Please look in firefox to view the datepicker fallback and chrome to view the input type date.

推荐答案

jQuery的datepicker几乎不同，一整年只是 yy 这样做 yyyy 可以让你全年两次。

Firsly, jQuery's datepicker does it a little differently, a full year is just yy so doing yyyy gets you the full year twice.

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

Here's a list of the date formats -> http://api.jqueryui.com/datepicker/#utility-formatDate

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

Note that y is a two-digit year, and yy is a four digit year.

要以一种格式显示datepicker，并提交不同的格式，您可以使用 altField 选项和另一个保存替代值的输入。

这是您向用户显示原始输入的输入。

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.

为了设置本机datepicker，你也可以做一些类似

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" />

和

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

这篇关于输入类型日期格式和datepicker问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！