Bootstrap date-time picker日历组件未随按钮滚动问题求助

Hey Abhinav, 我刚好踩过这个Bootstrap日期选择器的滚动坑，给你几个靠谱的解决办法，亲测有效！

方案1：指定插件的容器（最推荐） #

默认情况下，DateTimePicker会把日历组件插入到<body>标签下，所以页面滚动时它不会跟着按钮走。我们可以通过container配置项，把日历组件绑定到按钮的父容器上，让它相对于父容器定位：

1. 首先给按钮的父元素加一个类，比如datepicker-wrapper，并设置CSS：

.datepicker-wrapper {
    position: relative; /* 关键！让日历基于这个容器做绝对定位 */
}

2. 初始化日期选择器时指定container：

$('.your-datepicker-btn').datetimepicker({
    container: '.datepicker-wrapper'
});

这样日历组件会被插入到这个父容器里，滚动页面时就会跟着按钮同步移动了。

方案2：监听滚动事件动态调整位置 #

如果方案1不生效（比如某些特殊布局场景），可以手动监听页面滚动，实时更新日历的位置：

// 初始化日期选择器
const $dateBtn = $('.your-datepicker-btn');
const datePickerInstance = $dateBtn.datetimepicker().data('datetimepicker');

// 监听页面滚动
$(window).on('scroll', function() {
    // 只有日历显示时才调整位置
    if (datePickerInstance.widget.is(':visible')) {
        const btnPos = $dateBtn.offset();
        datePickerInstance.widget.css({
            top: btnPos.top + $dateBtn.outerHeight() + 'px',
            left: btnPos.left + 'px',
            position: 'fixed' // 用fixed定位跟随滚动
        });
    }
});

// 日历关闭时移除滚动监听，优化性能
$dateBtn.on('dp.hide', function() {
    $(window).off('scroll');
});

方案3：使用widgetParent配置项（针对Eonasdan版本） #

如果你用的是Eonasdan Bootstrap DateTimePicker（最常用的那个版本），还可以直接用widgetParent配置：

$('.your-datepicker-btn').datetimepicker({
    widgetParent: $dateBtn.parent()
});

这个配置和方案1原理类似，直接把日历组件的父元素指定为按钮的父容器，实现跟随滚动。

额外注意事项 #

• 检查父容器的overflow属性：如果父容器设置了overflow: auto或scroll，可能会把日历组件裁剪掉，这时候可以给父容器加overflow: visible，或者调整日历的z-index值。
• 测试兼容性：不同浏览器对定位的处理略有差异，记得在目标浏览器里验证效果。

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