从iOS / Android上的web-app调用本机dateselect器
我试图通过使用HTML5在不同的平台上运行原生Web应用程序来探索可能性。 目前， <input type="date">字段只是在Android和iOS上打开标准软键盘。 我想在未来的移动操作系统的软键盘将包括dateselect器等 – 就像<select>调用本地select今天。
由于这不是在Android或iOS上实现的，而是在本地UI中实现的，Web应用程序是否可以调用本地dateselect器，即单击时是否可以？
这将使我们能够停止使用像jQuery mobile和YUI这样的JavaScript库。
如果我的问题不清楚，请告诉我。 先谢谢你 ：-）
由于有些设备支持<input type="date">有些设备不支持，所以需要小心。 以下是2012年的一些观察结果，今天仍然有效：
-
可以通过设置该属性然后回读其值来检测是否支持
type="date"。 不支持它的浏览器/设备将忽略设置types的date并在回读该属性时返回text。 或者， Modernizr可用于检测。 请注意，检查某些Android版本是不够的; 就像Android 4.0.3上的三星Galaxy S2确实支持type="date"，但是最近的Android 4.0.4上的Google / Samsung Nexus S 不支持 。 -
预设本地dateselect器的date时，请务必使用设备可识别的格式。 如果不这样做，设备可能会默默地拒绝它，当试图显示一个现有的值时留下一个空的input域。 就像在运行Android 4.0.3的Galaxy S2上使用dateselect器一样，本身可能会在6月1日将
<input>设置为2012-6-1。 但是，从JavaScript设置值时，需要前导零：2012-06-01。 -
当使用诸如Cordova（PhoneGap）之类的东西在不支持
type="date"设备上显示本机dateselect器时：-
一定要正确检测内置的支持。 就像在2012年运行Android 4.0.3的Galaxy S2一样，错误地使用Cordova Android插件也会导致连续两次显示dateselect器：在第一次点击“set”后再次显示。
-
当同一页面上有多个input时，一些设备显示“上一个”和“下一个”进入另一个表单域。 在iOS 4上，这不会触发
onclick处理程序，从而为用户提供常规input。 使用onfocus触发插件似乎更好。 -
在iOS 4上，使用
onclick或onfocus触发2012 iOS插件首先进行常规键盘显示，之后将dateselect器放在顶部。 接下来，在使用dateselect器之后，还需要closures常规键盘。 显示dateselect器之前，使用$(this).blur()删除焦点对iOS 4有帮助，并且不影响我testing的其他设备。 但是它引入了一些在iOS上快速闪动的键盘，在第一次使用的时候事情可能会更加混乱，因为dateselect器比较慢。 如果使用插件，可以通过使inputreadonly来完全禁用普通键盘，但是在同一屏幕上的其他input中键入时禁用“上一个”和“下一个”button。 也似乎iOS 4的插件没有使本地dateselect器显示“取消”或“清除”，但我想这是一个iOS 4的东西 。 -
在iOS 4 iPad（模拟器）上，Cordova插件在2012年似乎没有正确渲染，基本上不给用户任何选项来input或更改date。 （也许iOS 4不会在Web视图之上很好地呈现其本机dateselect器，或者我的Web视图的CSS样式有一些效果，当然这可能与真实设备不同：请评论或编辑！）
-
尽pipe在2012年，Androiddateselect器插件试图使用与iOS插件相同的JavaScript API，并且其示例使用了
allowOldDates，但Android版本实际上并不支持该API插件。 此外，它将新date返回为2012/7/2而iOS版本返回Mon Jul 02 2012 00:00:00 GMT+0200 (CEST)。
-
-
即使支持
<input type="date">，情况可能看起来很乱：-
iOS 5以本地化格式很好地显示
2012-06-01，如1 Jun. 2012June 1, 20121 Jun. 2012或1 Jun. 2012June 1, 2012（甚至在更新dateselect器时立即更新）。 然而，运行Android 4.0.3的Galaxy S2显示了2012-6-1或2012-06-01的丑陋，无论使用哪种语言环境。 -
当触摸date输入时，或在其他input中使用“上一个”或“下一个”时，iPad（模拟器）上的iOS 5不会隐藏键盘。 然后它同时显示input下方的dateselect器和底部的键盘， 似乎允许来自两者的任何input。 但是，虽然它确实改变了可见值，但键盘input实际上被忽略了。 （当读回数值或再次调用dateselect器时显示）。当键盘还没有显示时，然后触摸date输入只显示dateselect器，而不是键盘。 （这可能是一个真实的设备不同，请评论或编辑！）
-
设备可能会在input字段中显示光标，长按可能会触发剪贴板选项，也可能会显示常规键盘。 点击时，有些设备甚至可能会在一秒钟内显示常规键盘，然后再更改dateselect器。
-
iOS 5现在更好地支持HTML5。 在你的web应用程序呢
<input type="date" name="date" />
Android 4.0版本缺less这种types的本地菜单支持。
iOS5支持这个（ 参考 ）。 如果你想调用本地dateselect器，你可能有一个PhoneGap的选项（我自己没有testing过）。
给Mobiscroll一个尝试。 滚动式date和时间select器是专门为触摸设备上的交互而创build的。 它非常灵活，可以轻松定制。 它带有iOS / Android主题。
我的回答是过分简单化的。 如果您想编写跨平台的简单代码，请使用window.prompt方法向用户询问date。 显然你需要用正则expression式进行validation，然后创builddate对象。
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">
您可以使用Trigger.io的用户界面模块来使用本机Androiddate/时间select器与常规的HTML5input。 这样做虽然需要使用整体框架（所以不能用作常规的移动网页）。
你可以在这个博客文章的截图之前和之后看到： date时间select器
在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'); };
在你的表单元素上使用input type="time" 。 这将节省您尝试使用数据select器库的所有麻烦。
