从iOS/Android上的web-app调用本机日期选择器

Question

从iOS/Android上的web-app调用本机日期选择器

hni*_*sen 77 javascript iphone html5 android ios

我正在尝试使用HTML5在不同平台上运行本机Web应用程序来探索可行性.目前,一个<input type="date">领域只是在Android和iOS上打开标准软键盘.我想在未来移动操作系统的软键盘将包括日期选择器等 - 就像<select>今天调用本机选择一样.

由于这不是在Android或iOS上实现,而是在本机UI中实现,因此Web应用程序是否可以调用本机日期选择器,即单击时？

这将使我们可以停止使用jQuery mobile和YUI等JavaScript库.

如果我的问题不清楚,请告诉我.先感谢您 :-)

Answer 1

Arj*_*jan 104

有些年代以来有些设备支持<input type="date">但其他设备没有,所以需要小心.以下是2012年的一些观察结果,今天仍然有效:

可以type="date"通过设置该属性然后读回其值来检测是否支持.不支持它的浏览器/设备将忽略设置类型date并text在读回该属性时返回.或者,Modernizr可用于检测.请注意,检查某些Android版本是不够的; 像Android 4.0.3上的三星Galaxy S2确实支持type="date",但谷歌/三星Nexus S在最新的Android 4.0.4上没有.
在预设本机日期选择器的日期时,请务必使用设备可识别的格式.如果不这样做,设备可能会静默拒绝它,在尝试显示现有值时会留下一个空输入字段.就像使用日期选取器上的Galaxy S2运行的是Android 4.0.3本身可能设置<input>到2012-6-1了6月1日.但是,从JavaScript设置值时,它需要前导零:2012-06-01.
使用Cordova(PhoneGap)之类的东西在不支持的设备上显示本机日期选择器时type="date":
- 务必正确检测内置支持.就像在2012年银河S2运行的是Android 4.0.3,错误地还用科尔多瓦Android插件会导致显示的日期选择器连续两次:一次点击后,在其第一次出现的"设置".
- 当同一页面上有多个输入时,某些设备会显示"previous"和"next"进入另一个表单字段.在iOS 4上,这不会触发onclick处理程序,因此会为用户提供常规输入.使用onfocus触发插件似乎更好.
- 在iOS 4上,使用onclick或onfocus触发2012 iOS插件首先进行常规键盘演示,然后将日期选择器置于其上.接下来,在使用日期选择器之后,仍然需要关闭常规键盘.使用$(this).blur()被证明有助于前的日期选择器为iOS 4,并没有影响我测试的其他设备移除焦点.但是它在iOS上引入了一些快速闪存的键盘,在第一次使用时可能会更加混乱,因为日期选择器速度较慢.readonly如果使用插件,可以通过输入完全禁用常规键盘,但是当在同一屏幕上键入其他输入时禁用"上一个"和"下一个"按钮.似乎iOS 4插件没有让原生日期选择器显示"取消"或"清除",但我猜这是iOS 4的东西.
- 在iOS 4 iPad(模拟器)上,2012年Cordova插件似乎无法正确呈现,基本上没有给用户任何输入或更改日期的选项.(也许iOS 4不能在Web视图上很好地呈现其原生日期选择器,或者我的Web视图的CSS样式可能会产生一些影响,当然这在真实设备上可能会有所不同:请评论或编辑!)
- 虽然,在2012年,Android日期选择器插件尝试使用与iOS插件相同的JavaScript API,并且使用allowOldDates了它的示例,Android版本实际上并不支持它.此外,它返回2012/7/2了iOS版本返回时的新日期Mon Jul 02 2012 00:00:00 GMT+0200 (CEST).
即使<input type="date">支持,事情可能看起来很混乱:
- iOS 5很好地2012-06-01以本地化格式显示,如1 Jun. 2012或June 1, 2012(甚至在操作日期选择器时立即更新).但是,运行Android 4.0.3的Galaxy S2显示丑陋2012-6-1或2012-06-01无论使用哪种语言环境.
- 当触摸日期输入时,或者在另一个输入中使用"上一个"或"下一个"时,iPad(模拟器)上的iOS 5不会隐藏键盘.然后它同时显示输入下方的日期选择器和底部的键盘,并且似乎允许来自两者的任何输入.但是,虽然它确实更改了可见值,但实际上忽略了键盘输入.(在回读值时或在再次调用日期选择器时显示.)当键盘尚未显示时,触摸日期输入仅显示日期选择器,而不是键盘.(这在真实设备上可能有所不同,请评论或编辑!)
- 设备可能会在输入字段中显示光标,长按可能会触发剪贴板选项,也可能显示常规键盘.点击时,某些设备甚至可能会在一瞬间显示常规键盘,然后再更改为显示日期选择器.