输入DateTime-Local任何浏览器ios 9本地日期时间选择器-如何选择年



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

我们有一个带有日期/时间输入的表单:

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

在iPad或iPhone的Safari/Chrome或Firefox浏览器中(IOS 9.02刚刚确认,但旧版本也是如此),当我点击输入字段时,它会正确地弹出本机日期/时间选择器,但是没有更改年份的工具。

这根本不是一个选择。是我遗漏了什么基本内容,还是这是IOS的缺陷?请注意,这在我们测试过的所有其他平台(Chrome/FireFox)上都可以正常工作,只是在带有本机选择器的IOS上不行。

对日期类型输入的全部支持在大多数浏览器中尚未可用,因此您在这里遇到的问题。为了使用它们,一个解决方案是利用polyfill来提供浏览器不支持的功能。

http://html5please.com/日期

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

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

那么就可以在使用上面的例子时选择年份。

Webshim链接: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使用的额外信息。

这是不是一个bug。正如Safari Developer Library所述,以下值仅对datetime-local picker有效:

  • 。用于指定日期值的输入控件。用户可以选择月份、日期和年份。不像datetime, date不提供一天中的时间。
  • datetime 。用于指定日期和时间值的输入控件。用户可以选择月份、月份中的几号、年份和时间天
  • datetime-local 。一个输入控件,用于指定日期和时间值,其格式取决于语言环境。

你可以在这里找到完整的文档:

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

我建议你结合datedatetime输入字段,以适应你的应用程序的iOS浏览器。

添加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

最新更新