Bootstrap Datepicker autoclose配置无效 日历自动弹出如何解决

两个异常是独立诱因导致的，和autoclose配置无关：

• 页面加载日历自动弹出：你在DOM上添加了data-provide="datepicker"属性，同时又写了jQuery手动初始化代码，导致日期选择器被重复初始化两次。data-provide是组件自带的自动初始化标记，页面加载时会自动触发一次组件渲染，后续JS初始化又会触发一次渲染逻辑，最终导致面板默认展开。autoclose配置仅负责用户选中日期后自动关闭面板，不控制初始化阶段的弹窗行为，这也是你调整该配置无效的原因。
• Label显示异常：Bootstrap的form-floating浮动标签有严格的DOM结构要求：输入框、label必须是.form-floating容器的直接子元素，且输入框在前、label在后。你当前把input和label都嵌套在.input-group内层容器中，层级不符合样式规则，导致标签定位、显示全部错位。

这也解释了你移除form-floating类后弹窗问题依然存在的现象：弹窗问题和浮动标签样式完全无关，单独移除该类只会消除标签样式异常，解决不了重复初始化导致的自动弹窗。

1. 调整HTML结构，删除data-provide="datepicker"属性，修正DOM层级适配form-floating的规则，修正后代码如下：

<div class="row mb-2">
    <div class="col-sm-4">
        <div class="form-floating">
            <div class="input-group date" id="dp">
                <input 
                    type="text" 
                    class="form-control" 
                    id="Last_Reviewed_On" 
                    readonly 
                    name="Last_Reviewed_On"
                >
                <label for="Last_Reviewed_On">Last Reviewed On</label>
                <!-- 可按需添加日历图标，不影响功能 -->
                <span class="input-group-text">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
                    </svg>
                </span>
            </div>
        </div>
    </div>
</div>

2. 保留原有jQuery初始化逻辑，可追加一行兜底代码，避免特殊场景下初始化阶段弹窗：

$('#dp').datepicker({
    autoclose: true,
    todayHighlight: true,
    format: "mm/dd/yyyy",
    startDate: new Date()
}).datepicker('hide'); // 初始化完成后强制隐藏面板，兜底解决自动弹出问题

• 移除data-provide属性后组件仅会被JS初始化一次，不会出现页面加载就弹出日历面板的问题
• 修正DOM层级后，form-floating浮动标签可以正常定位、显示
• 原有日期格式限制、今日高亮、选完自动关闭、禁止选择今日之前日期的配置均可正常生效

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