从iOS / Android上的网络应用调用本地日期选择器

Question 1

我正在尝试使用HTML5在不同平台上运行本机Web应用程序的可能性。当前，一个<input type="date">字段仅在Android和iOS上打开标准软键盘。我想，将来移动操作系统的软键盘将包括日期选择器等，就像<select>今天调用本机选择一样。

由于未在Android或iOS上实现，而是在本机UI中实现，因此网络应用程序是否有可能调用本机日期选择器，即在单击时？

这将使我们能够停止使用jQuery mobile和YUI之类的JavaScript库。

如果我的问题仍然不清楚，请告诉我。先感谢您：-）

Question 2

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

可以type="date"通过设置该属性然后读取其值来检测是否支持。不支持它的浏览器/设备将忽略将类型设置为date并text在读回该属性时返回。另外，Modernizr可用于检测。请注意，仅检查某些Android版本还不够。像三星Galaxy S2在Android 4.0.3不支持type="date"，但谷歌/三星Nexus S在最近的Android 4.0.4确实没有。
为本地日期选择器预设日期时，请确保使用设备可以识别的格式。如果不这样做，设备可能会静默拒绝它，在尝试显示现有值时会留下一个空的输入字段。如使用在银河S2日期选取器运行Android 4.0.3本身可能设置<input>到2012-6-1了6月1日。但是，从JavaScript设置值时，它需要前导零：2012-06-01。
当使用Cordova（PhoneGap）之类的东西在不支持的设备上显示本机日期选择器时type="date"：
- 确保正确检测内置支持。就像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插件也没有使本地日期选择器显示为“取消”
- 在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不会隐藏键盘。然后，它同时显示输入下面的日期选择器和键盘在底部，并且似乎允许来自任何输入。但是，尽管它确实会更改可见值，但实际上会忽略键盘输入。（在读回值或再次调用日期选择器时显示。）当尚未显示键盘时，触摸日期输入仅显示日期选择器，而不显示键盘。（在实际设备上可能有所不同，请评论或编辑！）
- 设备可能会在输入字段中显示光标，长按可能会触发剪贴板选项，也可能会显示常规键盘。单击时，某些设备甚至可能在显示日期选择器之前显示常规键盘一秒钟。

Question 3

iOS 5现在更好地支持HTML5。在您的webapp中

<input type="date" name="date" />

从4.0版开始的Android缺少这种本机菜单支持。

Question 4

iOS5支持此功能（参考）。如果要调用本机日期选择器，则可以通过PhoneGap选择一个选项（我自己尚未对此进行测试）。

Question 5

给Mobiscroll一试。滚动条样式的日期和时间选择器是专门为在触摸设备上进行交互而创建的。它非常灵活，并且易于自定义。它带有iOS / Android主题。

Question 6

我的答案过于简单。如果您想编写跨平台的简单代码，请使用window.prompt方法询问用户日期。显然，您需要使用正则表达式进行验证，然后创建日期对象。

function onInputClick(e){
var r = window.prompt("Give me a date (YYYY-MM-DD)", "2014-01-01");
if(/[\d]{4}-[\d]{1,2}-[\d]{1,2}/.test(r)){
    //date ok
    e.value=r;
    var split=e.value.split("-");
    var date=new Date(parseInt(split[0]),parseInt(split[1])-1,parseInt(split[2]));
}else{
    alert("Invalid date. Try again.");
}
}

在您的HTML中：

<input type="text" onclick="onInputClick(this)" value="2014-01-01">

Question 7

您可以使用Trigger.io的UI模块来将本机Android日期/时间选择器与常规HTML5输入配合使用。但是，这样做确实需要使用整体框架（因此无法用作常规的移动网页）。

您可以在此博客文章中的屏幕截图之前和之后看到：日期时间选择器

Question 8

在HTML中：

  <form id="my_form"><input id="my_field" type="date" /></form>

在JavaScript中

   // test and transform if needed
    if($('#my_field').attr('type') === 'text'){
        $('#my_field').attr('type', 'text').attr('placeholder','aaaa-mm-dd');  
    };

    // check
    if($('#my_form')[0].elements[0].value.search(/(19[0-9][0-9]|20[0-1][0-5])[- \-.](0[1-9]|1[012])[- \-.](0[1-9]|[12][0-9]|3[01])$/i) === 0){
        $('#my_field').removeClass('bad');
    } else {
        $('#my_field').addClass('bad');
    };

展开摘要

Question 9

在表单元素上使用input type="time"。它将为您节省尝试使用数据选择器库的所有麻烦。