Question

我正在尝试使用HTML5在不同平台上运行本机Web应用程序来探索这些可能性。目前，<input type="date">字段只会在Android和iOS上打开标准软键盘。我想在未来移动操作系统的软键盘将包含日期选择器等 - 正如<select>今天调用原生选择一样。

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

这使我们可以停止使用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"的设备上显示原生日期选择器时：
- 务必正确检测内置支持。就像2012年运行Android 4.0.3的Galaxy S2一样，使用Cordova Android插件错误地将导致连续两次显示日期选择器：在第一次出现时单击“set”后再次显示。
- 当同一页面上有多个输入时，某些设备显示“previous”和“next”进入另一个表单字段。在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不会在网页视图上很好地呈现其原生日期选择器，或者我的网页视图的CSS样式可能会产生一些影响，当然在真实设备上可能会有所不同：请评论或编辑！）
- 尽管在2012年，Android日期选择器插件尝试使用与iOS插件相同的JavaScript API，并且其示例使用allowOldDates，但Android版本实际上并不支持。此外，当iOS版本返回2012/7/2时，它将新日期返回为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不会隐藏键盘。然后它同时在输入下方显示日期选择器，在底部显示键盘，似乎以允许来自两者的任何输入。但是，虽然它确实更改了可见值，但实际上忽略了键盘输入。（在回读值时或在再次调用日期选择器时显示。）当键盘尚未显示时，触摸日期输入仅显示日期选择器，而不是键盘。 （在真实设备上可能会有所不同，请评论或编辑！）
- 设备可能会在输入字段中显示光标，长按可能会触发剪贴板选项，也可能会显示常规键盘。点击时，某些设备甚至可能会在更改为显示日期选择器之前瞬间显示常规键盘。

Answer 2

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

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

Android 4.0版本缺少此类本机菜单支持。

Answer 3

iOS5支持此功能（Reference）。如果你想调用本机日期选择器，你可能有一个PhoneGap选项（我自己没有测试过）。

Answer 4

尝试Mobiscroll。滚动条样式的日期和时间选择器专门用于触摸设备上的交互。它非常灵活，可轻松定制。它带有iOS / Android主题。

Answer 5

我的回答过于简单了。如果您想编写跨平台工作的简单代码，请使用 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">

Answer 6

您可以使用Trigger.io's UI模块将常规HTML日期/时间选择器与常规HTML5输入结合使用。这样做确实需要使用整体框架（因此不能用作常规移动网页）。

您可以在此博客文章中看到屏幕截图之前和之后：date time picker

Answer 7

在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');
    };

Answer 8

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

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

8 个答案: