iOS中触摸/点击事件内触发原生日期时间选择器无效问题

问题根源 #

iOS的Safari及WKWebView有严格的交互安全限制：表单控件（如<input type="datetime-local">）的激活必须由用户真实的触摸/点击事件直接触发，通过trigger('click')这类模拟事件的方式会被浏览器拦截，这就是你的代码在Android正常、iOS失效的核心原因。

解决方案一：透明input覆盖图标（推荐） #

将input元素设置为透明，完全覆盖在时钟图标上方，用户点击图标时实际点击的是input本身，无需额外事件模拟，兼容性最好。

修改后的HTML：

<!-- 用容器包裹图标和input，实现input覆盖 -->
<div style="position: relative; display: inline-block; cursor: pointer;">
  <i class="fa fa-clock-o fa-2x" id="datetime_picker"></i>
  <input 
    id="input" 
    type="datetime-local" 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; margin: 0;"
  />
</div>
<label 
  id="new-incident-time-of-incident-label" 
  class="label-datetime" 
  data-field="IncidentDate" 
  style="white-space: nowrap;"
></label>

对应的JS可以移除原来的touchend事件绑定，因为点击操作直接作用在input上，会自动唤起选择器。

解决方案二：在触摸事件中直接调用focus() #

如果不想调整HTML结构，可以修改JS，在用户触摸事件的回调里直接调用input的原生focus()方法（而非模拟click事件），这是iOS允许的用户触发操作。

修改后的JS事件绑定：

$("#datetime_picker").on("touchend", (e) => {
    e.preventDefault(); // 阻止默认触摸行为避免冲突
    $("#input")[0].focus(); // 调用原生DOM元素的focus方法
});

额外注意事项 #

1. 确保datetime-local的格式正确：input.val()需要是yyyy-MM-ddTHH:mm格式（例如2024-05-20T14:30），你的XDate转换代码new XDate(date).toString("yyyy-MM-dd'T'hh:mm")中用了小写hh（12小时制），如果系统是24小时制可能出现兼容性问题，建议改为大写HH。
2. 避免使用display: none或visibility: hidden隐藏input，这会导致iOS无法正确初始化表单控件的交互状态，你当前用的left:9999px虽然可行，但覆盖式透明input的体验更优。

内容的提问来源于stack exchange，提问作者Ole M