关于在 Google Chrome 中输入 [type=date] 的快速常见问题解答

Eiji Kitamura
北村英二

  • 本文由 Chrome 软件工程师 Kent Tamura 撰写。

您可能已经注意到,Google Chrome 自 Chrome 20 起就开始支持日期选择器。用户只需将 input 元素的 type 属性设置为 date,即可点击箭头按钮,然后 Chrome 会弹出一个很棒的日历 widget。

由于收到了大量来自开发者的反馈,我们想在此澄清一些关于如何充分利用日期选择器的注意事项。

语言区域如何影响输入值的日期格式?

用户可以在 input[type=date] 的文本字段中输入日期值,其中日期格式显示为灰色文本。此格式通过操作系统的设置获取。

日期格式屏幕

网络作者无法更改日期格式,因为目前没有指定日期格式的标准。

发送到服务器时,输入值如何表示?

从 HTTP 请求中的 input[type=date] 解读的日期值(例如 GET / POST)将采用 yyyy-mm-dd 格式。

输入值会返回哪种格式?

无论呈现格式如何,input.value 始终返回为 yyyy-mm-dd

输入值接受哪种格式?

以编程方式设置 input.value 时,无论初始值和 JavaScript 注入值的呈现格式如何,该值仅接受 yyyy-mm-dd 样式。

如何更改日期选择器的外观?

目前无法设置日期选择器外观的样式。在 WebKit 中,我们之前提供了使用 -webkit-appearance CSS 属性或 ::-webkit-foo 伪类选择器设置表单控件样式的方法。不过,日历弹出式窗口在 WebKit 中并未提供此类方式,因为它与文档是分开的,例如 <select> 的弹出式菜单,并且目前没有关于如何控制其子元素样式的标准。

如何避免 jQuery 日期选择器与原生日期选择器之间发生冲突?

如果您尝试过在 Google Chrome 中的 input[type=date] 上使用 jQuery Datepicker,可能会注意到 jQuery 界面与原生日历弹出式窗口存在重叠的日历。如果您希望在所有平台上应用 jQuery Datepicker,请使用 input[type=text] 而不是 input[type=date]。不仅 Google Chrome,iOS Safari、黑莓浏览器和 Opera 都有自己的 input[type=date] 界面,而目前尚无法使用 input[type=date] 在所有平台上实现统一的界面。如果您只想在不支持 input[type=date] 的平台上应用 jQuery Datepicker,则可以使用 Modernizr 或以下代码:

var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}

if (!isDateInputSupported())  // or.. !Modernizr.inputtypes.date
    $('input[type="date"]').datepicker();