CodeIgniter项目中Bootstrap Datepicker初始加载显示异常求助

看起来你碰到的是jQuery UI Datepicker（注：你提到Bootstrap Datepicker，但容器是ui-datepicker-div，实际是jQuery UI的组件）的初始渲染和交互冲突问题。这个动态生成的容器默认在页面加载后处于可见状态，再加上z-index可能偏低，就会出现你描述的“页脚下方显示、滚动点击后消失”的异常。

下面是针对性的解决方案，包含代码和说明：

步骤1：强制初始隐藏日期选择器容器 #

首先通过CSS强制隐藏这个动态生成的容器，避免页面加载时它直接显示出来：

#ui-datepicker-div {
    display: none !important;
    z-index: 9999 !important; /* 调高z-index，避免被其他元素遮挡或干扰 */
}

这里加!important是为了覆盖插件自带的内联样式，确保初始隐藏生效。

步骤2：优化Datepicker初始化代码，确保交互正常 #

在DOM加载完成后初始化Datepicker，同时添加事件确保点击输入框时容器能正确显示，再做一次初始隐藏的双重保险：

$(document).ready(function() {
    // 初始化日期选择器，添加beforeShow事件确保显示逻辑可靠
    const datepickerInstance = $(".datepicker-1").datepicker({
        minDate: 0,
        dateFormat: 'DD, d MM, yy',
        showOn: "both",
        buttonImageOnly: true,
        beforeShow: function(input, inst) {
            // 每次触发选择器前强制显示容器
            $('#ui-datepicker-div').show();
        }
    });

    // 设置默认日期
    datepickerInstance.datepicker("setDate", new Date());

    // 初始化完成后再次隐藏容器，双重保险
    $('#ui-datepicker-div').hide();
});

额外排查建议 #

• 检查页面中是否有其他滚动事件、resize事件的JS代码，不小心修改了#ui-datepicker-div的display或position属性；
• 确认你的jQuery和jQuery UI版本兼容，版本不匹配也可能导致这类交互异常；
• 如果使用了Bootstrap的模态框或其他弹窗组件，确保Datepicker的z-index高于这些组件，避免被遮挡。

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