jQuery datepicker onSelect执行后第二个日历显示失效问题

嘿，这个问题我太熟悉了！你遇到的情况几乎可以肯定是jQuery UI Datepicker的默认关闭机制和事件时序冲突导致的：当你在第一个日历选择日期后，onSelect触发并打开第二个日历，但此时第一个日历的关闭逻辑（比如绑定在document上的点击监听，用于点击外部关闭日历）也在同时执行，结果刚打开的第二个日历被这个全局点击事件给关掉了，所以才会只显示一秒就消失。

解决方案：延迟执行第二个日历的显示操作 #

最稳妥的修复方式是把第二个日历的show()方法放到setTimeout中，让它在第一个日历的关闭流程完成后再执行。这样就能避开冲突的事件时序。

修改后的完整代码如下：

// 初始化第二个日历
$("#edit-to--2").datepicker({ 
    dateFormat: 'D, dd M', 
    showAnim: "slideDown", 
    changeYear: true 
}); 

// 初始化第一个日历，修改onSelect逻辑
$('#edit-from--2').datepicker({ 
    dateFormat: 'D, dd M', 
    changeYear: true, 
    showAnim: "slideDown", 
    minDate: new Date(), 
    onSelect: function () { 
        var date = $(this).datepicker("getDate"); 
        date.setDate(date.getDate() + 7); 
        $("#edit-to--2").datepicker("option", "minDate", date); 
        
        // 延迟100ms显示第二个日历，避开第一个日历的关闭事件
        setTimeout(function() {
            $("#edit-to--2").datepicker("show");
        }, 100);
    } 
}); 

为什么这个方法有效？ #

jQuery UI Datepicker在用户选择日期后，会先触发onSelect回调，然后再执行内部的关闭逻辑（包括触发document上的点击事件）。通过setTimeout把show()延迟到下一个事件循环执行，就能让第一个日历的关闭流程先跑完，再打开第二个日历，这样就不会被全局的关闭事件影响了。

额外排查点 #

如果延迟方法还是不行，可以检查以下几点：

• 确认#edit-to--2元素没有被其他JS代码或CSS规则意外设置为display: none
• 尝试移除第二个日历的showAnim属性，看看是不是动画效果导致的显示异常
• 检查页面中有没有其他和日期选择相关的脚本，是否存在事件冲突

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