jQuery UI Datepicker在iOS上不起作用

Question

我有一个带有几个日期字段的搜索表单，我很高兴地使用jQuery UI的datepicker：

<input class="formFields datepicker" id="arrival" name="arrival" required="" placeholder="Arrival" readonly="true" type="text">
<input class="formFields datepicker" id="departure" name="departure" required="" placeholder="Departure" readonly="true" type="text">

$( ".datepicker" ).datepicker();

这会在桌面浏览器上产生令人赞叹的日期选择器弹出窗口：

但是由于某种原因，在iPhone和iPad上，轻击字段无济于事。Chrome和Safari都是这种情况。

我使用以下方法检查click事件是否被识别（是）：

$(".datepicker").click(function(){
    alert("clicked me");
});

我还尝试修改输入字段以键入日期而不是文本：

<input class="formFields datepicker" id="arrival" name="arrival" required="" placeholder="Arrival" type="date">

但这实际上并不能作为解决方案（实际上是促使我开始使用jQuery datepicker的原因），原因有两个。

• 占位符文本无法识别，因此该字段要么显示为空白，要么显示为“ mm / dd / yyyy”，而不是“到达”
• 然后必须在台式机上使用默认的日期选择器，这实际上并没有那么吸引人，至少与我目前所拥有的相比

Answer 1

可能有点晚了。

我通过注释掉一个bind('mousemove'...)解决了这个问题，似乎该事件导致iOS Chrome和Safari（在我的例子中）无响应。

我注释掉了代码，代码又恢复正常了。但我需要在 PC 上使用 mousemove，因此我将 mousemove 包装在 if mobile 语句中。

if (window.innerWidth < 480) {
    $(document).bind('mousemove', function (e) {
       // something that work on PC.
    })
}

也许使用innerWidth 480来检测移动设备是愚蠢的。但它会让您了解如何解决这个问题。

如果绑定方法经常使用，您也可以包装它。有一个库 http://touchpunch.furf.com/，它似乎功能不全，但可以理解这个想法。