html 5 输入DateTime-Local 任何浏览器ios 9 本机日期时间选择器- 如何select 年？

html 5 input DateTime-Local any browser ios 9 native date time picker - how to select year?

我正在开发一个 html 5 商业应用程序，有人刚刚在 Beta 测试中发现了一些我找不到答案的奇怪东西。

我们有一个表格，上面有 date/time 输入：

<input type="datetime-local" step="any" id="StartDate" name="StartDate" value="2015-09-10T10:20:29">

在 iPad 或 iPhone 的 Safari / Chrome 或 Firefox 浏览器中（IOS 9.02 刚刚确认，但旧版本也是如此）当我点击输入字段时它正确地显示了本地 date/time 选择器，但是没有更改年份的工具。

这根本不是一个选择。我是否遗漏了一些基本的东西，或者这是 IOS 中的错误？请注意，这在我们用 Chrome / FireFox 测试过的所有其他平台上都可以正常工作，只是在 IOS 上使用它的原生选择器时不行。

这是不是错误。正如 Safari Developer Library 所述，以下值仅对 datetime-local 选择器有效：

  • 日期。用于指定日期值的输入控件。用户可以 select 月、日和年 。与日期时间不同，日期 不提供一天中的时间。
  • 日期时间。用于指定日期和时间值的输入控件。用户可以 select 月、日、年和时间 天.
  • 本地日期时间。用于指定 日期和时间 值的输入控件，其中格式取决于区域设置。

您可以在此处找到完整的文档：

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/InputTypes.html

我建议您合并 date 和 datetime 输入字段，以使您的应用适应 iOS 浏览器。

大多数浏览器尚不支持全范围的日期类型输入，因此您会遇到这里的问题。为了使用它们，一种解决方案是利用提供浏览器不支持的功能的 polyfill。

http://html5please.com/#date

一个例子是来自 webshims 库的表单 polyfill。

$.webshims.polyfill('forms forms-ext');

然后可以 select 使用上面的示例时的年份。

Webshim link: http://afarkas.github.io/webshim/demos/

配置器https://afarkas.github.io/webshim/demos/demos/cfgs/input-datetime-local.html#min=&max=&list=&step=&value=&startView=0&minView=0&stepfactor=&useDecadeBase=0&startValue=&calculateWidth=on&popover=&popover=&popover=

开发人员的

和 fiddle https://fiddle.jshell.net/trixta/VNuct/light/ 提供了有关使用 webshims 的更多信息。

添加 min/max 属性以允许滚动到不同的年份。

<input type="datetime-local" step="any" id="StartDate" name="StartDate" value="2015-09-10T10:20:29" min="1970-01-01T00:00" max="2030-01-01T00:00">

https://codepen.io/oriadam/pen/pxvqNE