使用Bootstrap Datepicker实现链接展示日期值的相关问题求解

我想使用bootstrap datepicker来美化报表中的日期筛选器，预期效果如下：

我当前使用的HTML代码如下：

<a href="javascript:;" class="badge badge-info datepicker filter_date_start_dp" data-date-format="mm/dd/yyyy"><i class="fal fa-filter" aria-hidden="true"></i> 11/1/2021</a>

目前日历可以正常弹出，选择日期后也能正确将值写入隐藏的input元素中，但存在以下问题：

• 首次点击选择日期时，选中状态未正常显示
• 无法将选中的日期值同步到a标签的内部文本中
• 选择日期后日历无法自动关闭
• 需要在选中日期后刷新页面
  尝试现有方案后还额外出现了datepicker在页面左上角弹出的问题。

完整解决代码 #

// 初始化datepicker，替换选择器为你的隐藏input实际选择器
const $hiddenInput = $('input[name=your_hidden_date_input]');
$('.filter_date_start_dp').datepicker({
    format: 'mm/dd/yyyy',
    autoclose: true, // 选中日期后自动关闭日历
    todayHighlight: true, // 高亮选中/当前日期，解决首次点击无选中状态的问题
    defaultDate: $hiddenInput.val() // 同步隐藏input初始值，保证首次打开就有选中状态
}).on('changeDate', function(e) {
    // 同步选中日期到a标签文本，保留原有筛选图标
    const formattedDate = e.format('mm/dd/yyyy');
    $(this).html(`<i class="fal fa-filter" aria-hidden="true"></i> ${formattedDate}`);
    
    // 选中后刷新页面，如需携带日期参数可替换为下方拼接URL的写法
    window.location.reload();
    // 带参数刷新示例：
    // window.location.href = `${window.location.pathname}?start_date=${formattedDate}`;
}).on('show', function() {
    // 修复日历弹出到左上角的定位偏移问题
    const triggerOffset = $(this).offset();
    setTimeout(() => {
        $('.datepicker').css({
            top: triggerOffset.top + $(this).outerHeight() + 5 + 'px',
            left: triggerOffset.left + 'px'
        });
    }, 10);
});

问题对应解决逻辑 #

• 首次选中无状态：通过todayHighlight配置开启选中高亮，同时设置defaultDate同步隐藏input的初始值，保证首次打开就能看到当前选中的日期状态
• 同步日期到a标签：bootstrap datepicker提供了changeDate事件，选中日期时会触发，从事件参数中可直接拿到格式化后的日期，替换a标签内容即可
• 自动关闭日历：开启autoclose配置即可原生实现
• 选中后刷新：在changeDate事件回调末尾执行页面刷新逻辑即可，可根据业务需求选择是否携带日期参数
• 定位偏移问题：监听日历显示的show事件，手动根据触发按钮的位置设置日历的定位，加短延时是为了覆盖组件默认的定位逻辑

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