jQuery UI Datepicker 在 iOS 上不起作用

Posted 2023-05-08

【中文标题】jQuery UI Datepicker 在 iOS 上不起作用

【英文标题】：jQuery UI Datepicker not working on iOS

【发布时间】：2015-12-03 22:26:43

【问题描述】：

我有一个带有几个日期字段的搜索表单，我很乐意在上面使用 jQuery UI 的日期选择器：

<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 都是这种情况。

我使用了以下方法来检查点击事件是否被识别（它是）：

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

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

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

但这并不是真正的解决方案（实际上是促使我首先使用 jQuery 日期选择器的原因）。

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

【问题讨论】：

这是一个常见的问题，在过去 10 年基于 PC 的 Web 开发中建立的所有出色的 Web 库都不能在新的 320 像素宽的智能手机平台上运行

你解决了吗。我在 iPhone 上使用 jquery ui datepicker 遇到了同样的问题，但 ipad 似乎很好，

【参考方案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 来检测移动设备可能是愚蠢的。但它会让你知道如何解决这个问题。

如果 bind 方法经常使用，你也可以封装它。有一个图书馆 http://touchpunch.furf.com/ 似乎功能不全，但完全可以理解。