Xpages日期选择器iOS兼容问题：日历弹窗弹出后立即消失

我之前处理过不少XPage在iOS上的兼容性问题，你的情况很典型——日期选择器弹窗刚弹出来就消失，尤其是在表格里的时候，这大概率是iOS触摸事件和XPage原生dijit组件的事件冒泡冲突导致的。结合你提供的代码和场景，给你几个可行的解决方向：

1. 阻止表格内的事件冒泡 #

如果想保留原有的dijit日期控件，最直接的办法是给日期输入框添加触摸事件处理，阻止事件冒泡到表格元素上，避免iOS的触摸机制误关闭弹窗：

<xp:inputText id="inputText1" value="#{document1.crm_etabl_date}" defaultValue="#{javascript:@Today}">
    <xp:dateTimeHelper id="dateTimeHelper1"></xp:dateTimeHelper>
    <xp:this.converter>
        <xp:convertDateTime type="date" dateStyle="short"></xp:convertDateTime>
    </xp:this.converter>
    <!-- 添加触摸事件阻止冒泡 -->
    <xp:eventHandler event="onTouchStart" submit="false">
        <xp:this.script><![CDATA[
            event.stopPropagation();
            event.preventDefault();
        ]]></xp:this.script>
    </xp:eventHandler>
</xp:inputText>

2. 改用Bootstrap日期选择器（推荐） #

你的页面里已经引入了Bootstrap标签（bx前缀），不如直接用Bootstrap的日期选择器组件，它对移动端的兼容性更好，不会出现这种弹窗闪退的问题，而且显示效果也更适配移动端：

<bx:datePicker id="crmEtablDatePicker" 
               value="#{document1.crm_etabl_date}" 
               format="yyyy-MM-dd" 
               defaultValue="#{javascript:@Today}">
    <xp:this.converter>
        <xp:convertDateTime type="date" dateStyle="short"></xp:convertDateTime>
    </xp:this.converter>
</bx:datePicker>

这个组件会自动适配iOS的触摸交互，弹窗稳定性比原生dijit控件好很多，而且不需要额外处理事件冲突。

3. 调整dijit控件的触摸配置 #

如果坚持使用原生dijit的DateTextBox，可以手动加载dojo的触摸模块，并给控件添加触摸事件处理：

<!-- 先加载dojo触摸模块 -->
<xp:this.resources>
    <xp:dojoModule name="dojo/touch"></xp:dojoModule>
</xp:this.resources>

<!-- 配置日期控件的触摸事件 -->
<xp:inputText value="#{document1.crm_etabl_date}" id="date1" disableClientSideValidation="true">
    <xp:dateTimeHelper id="dateTimeHelper2" dojoType="dijit.form.DateTextBox">
        <xp:this.dojoProps><![CDATA[{
            onTouchStart: function(e) {
                e.stopPropagation(); // 阻止事件冒泡到父元素
            }
        }]]></xp:this.dojoProps>
    </xp:dateTimeHelper>
    <xp:this.converter>
        <xp:convertDateTime type="date" dateStyle="short"></xp:convertDateTime>
    </xp:this.converter>
</xp:inputText>

补充说明 #

你提到移出表格后控件可以使用但显示效果不佳，这是因为表格的tr、td元素的触摸事件会和日期控件的弹窗触发事件产生冲突，iOS的触摸事件机制对嵌套元素的事件传递比较敏感，导致弹窗刚显示就被父元素的事件触发关闭。上面的几种方案都是从解决事件冲突或者更换更兼容的组件入手，应该能解决你的问题。

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