Meteor应用iOS端Bootstrap datetimepicker无法正常打开及选日期问题

看起来你遇到的是iOS上Bootstrap datetimepicker的典型触摸兼容性问题，我结合你的代码给几个针对性的解决方案：

问题分析 #

1. 长按才弹出选择器：iOS对非原生控件的click事件有300ms延迟，系统对短按的识别逻辑可能导致组件无法正确捕获触发信号，必须长按才能激活；
2. 点击触发后无法修改日期：手动调用show()后，组件的触摸选择事件可能和自定义的click事件产生冲突，或者传入的初始日期在iOS上解析异常，导致选择器始终锁定当天。

解决方案1：替换Click事件为Touchstart（适配iOS） #

iOS的触摸事件优先级高于click，直接监听touchstart可以避免长按延迟，同时兼容桌面端的click逻辑：

修改你的JavaScript事件绑定部分：

// 针对iOS设备用touchstart触发选择器
'touchstart #datepicker': function (event, template) {
  event.preventDefault();
  event.stopPropagation();
  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  if (isIOS) {
    template.$(".datepicker").data("DateTimePicker").show();
  }
},
// 桌面端保留click事件
'click #datepicker': function (event, template) {
  event.preventDefault();
  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  if (!isIOS) {
    template.$(".datepicker").data("DateTimePicker").show();
  }
},
// 保留原有的日期变更监听
'dp.change #datepicker': function (event) {
  event.preventDefault();
  console.log("change event " + event.date + " " + event.oldDate + " " + event.currentTarget.value);
}

解决方案2：调整输入框的触摸行为 #

iOS对readonly文本输入框有特殊的触摸处理逻辑，可能干扰组件的事件捕获。你可以把readonly替换为pointer-events: none，让点击直接穿透到父容器：

修改你的HTML代码：

<div id="datepicker" name="date">
  <input id="date1" name="date" class="set-due-date datepicker staticBuyerPlaceHolder" type="text" placeholder="Date" style="width:100%; pointer-events: none;">
</div>

解决方案3：确保初始日期是有效的Moment对象 #

如果oChild.value是字符串格式，iOS上Moment的解析可能出现异常，导致选择器默认锁定当天。确保传入的是标准Moment实例：

// 替换原有的date配置项，确保解析格式和format一致
date: oChild.value ? moment(oChild.value, 'L') : moment(),

额外建议 #

• 检查你的Bootstrap datetimepicker和Moment.js版本，尽量使用最新稳定版，旧版本可能存在iOS触摸兼容性bug；
• 测试时可以打开iOS Safari的开发者工具（需连接Mac），查看控制台是否有报错，帮助快速定位问题。

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