javascript - 从 iOS/Android 上的网络应用程序调用 native 日期选择器

Question

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

由于这不是在 Android 或 iOS 上实现的，而是在 native UI 中实现的，网络应用程序是否可以调用 native 日期选择器，即单击时？

这将使我们有可能停止使用 jQuery mobile 和 YUI 等 JavaScript 库。

如果我的问题有任何不清楚的地方，请告诉我。提前谢谢你:-)

Answer 1

由于有些设备支持 <input type="date"> 而有些设备不支持，因此需要小心。以下是 2012 年的一些观察结果，今天可能仍然有效:

可以通过设置该属性然后读回其值来检测是否支持 type="date"。不支持它的浏览器/设备将忽略将类型设置为 date 并在读回该属性时返回 text。或者，Modernizr 可用于检测。请注意，仅检查某些 Android 版本是不够的；就像 Android 4.0.3 上的三星 Galaxy S2 确实支持 type="date" 一样，但最新的 Android 4.0.4 上的 Google/Samsung Nexus S 不支持。

为本地日期选择器预设日期时，请务必使用设备可识别的格式。如果不这样做，设备可能会默默地拒绝它，在尝试显示现有值时留下一个空的输入字段。就像在运行 Android 4.0.3 的 Galaxy S2 上使用日期选择器一样，它本身可能会将 6 月 1 日的 <input> 设置为 2012-6-1。但是，当从 JavaScript 设置值时，它需要前导零: 2012-06-01 。

当使用 Cordova (PhoneGap) 之类的东西在不支持 type="date" 的设备上显示 native 日期选择器时:

确保正确检测内置支持。就像 2012 年在运行 Android 4.0.3 的 Galaxy S2 上一样，错误地使用 Cordova Android 插件会导致连续两次显示日期选择器:在第一次出现时单击“设置”后再次显示。

当同一页面上有多个输入时，某些设备会显示“上一个”和“下一个”以进入另一个表单字段。在 iOS 4 上，这不会触发 onclick 处理程序，因此为用户提供常规输入。使用 onfocus 来触发插件似乎效果更好。

在 iOS 4 上，使用 onclick 或 onfocus 触发 2012 iOS 插件首先使常规键盘显示，之后日期选择器被放置在其顶部。接下来，使用日期选择器后，仍然需要关闭常规键盘。在显示日期选择器之前使用 $(this).blur() 移除焦点对 iOS 4 有帮助，并且不会影响我测试的其他设备。但是它在 iOS 上引入了一些快速闪烁的键盘，并且在第一次使用时可能会更加困惑，因为那时日期选择器更慢。如果使用插件，则可以通过输入 readonly 来完全禁用常规键盘，但是在同一屏幕上输入其他输入时禁用“上一个”和“下一个”按钮。 iOS 4 插件似乎也没有使 native 日期选择器显示“取消”或“清除”。

在 iOS 4 iPad(模拟器)上，2012 年 Cordova 插件似乎没有正确呈现，基本上没有给用户任何输入或更改日期的选项。 (也许 iOS 4 没有在 web View 之上很好地呈现其原生日期选择器，或者我的 web View 的 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 在触摸日期输​​入或在另一个输入中使用“上一个”或“下一个”时键盘已经可见时不会隐藏键盘。然后它同时显示输入下方的日期选择器和底部的键盘，并且似乎允许来自两者的任何输入。然而，虽然它确实改变了可见值，但实际上忽略了键盘输入。 (在读回值时或再次调用日期选择器时显示。)当键盘尚未显示时，触摸日期输​​入仅显示日期选择器，而不显示键盘。 (这在真实设备上可能有所不同，请评论或编辑!)

设备可能会在输入字段中显示光标，长按可能会触发剪贴板选项，也可能会显示常规键盘。单击时，某些设备甚至可能会显示常规键盘一瞬间，然后更改为显示日期选择器。