滚动模式时，bootstrap-datepicker 不滚动

Posted 2023-05-07

【中文标题】滚动模式时，bootstrap-datepicker 不滚动

【英文标题】：bootstrap-datepicker does not scroll when scrolling the modal

【发布时间】：2013-12-27 15:09:11

【问题描述】：

我正在使用bootstrap-datepicker 并希望在引导程序 2 的模式上显示日期选择器。我遇到的问题是日期选择器在滚动模式时没有相应地滚动，它仍然存在。

代码：

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch Modal</button>
<div id="myModal" class="modal hide fade" style="height: 400px; overflow: scroll">
    <div style="height:300px"></div>
    <div>Choose Date:
        <input class="calendar" />
    </div>
    <div style="height:300px"></div>
</div>

和javascript：

var datePicker = $(".calendar").datepicker();

jsfiddler：http://jsfiddle.net/csrA5/

有什么办法可以让它在模态滚动的时候滚动吗？

【参考方案1】：

有选项datepicker('place') 来更新位置。我更新了jsfiddle

var datePicker = $(".calendar").datepicker();
var t ;
$( document ).on(
    'DOMMouseScroll mousewheel scroll',
    '#myModal', 
    function()       
        window.clearTimeout( t );
        t = window.setTimeout( function()            
            $('.calendar').datepicker('place')
        , 100 );        
    
);

【讨论】：

这在有滚动条时有效。例如，如果我有引导模式，它在最后一行占据整个屏幕和日期选择器。这种情况怎么处理。日期选择器位于屏幕下方。

我只是将滚动绑定添加到模态而不是文档。但它工作得很好。谢谢！！

请看这个小提琴。我用这个解决了类似的问题***.com/questions/12351871/…jsfiddle.net/jbK6a/15

【参考方案2】：

这是使用 jQuery 的另一种方式

var checkout = $(".calendar").datepicker();
$( "#myModal" ).scroll(function() 
    $('.calendar').datepicker('place')
);

【讨论】：

checkout 变量现在使用了吗？

【参考方案3】：

尝试在bootstrap-datepicker.js，函数“Datepicker.prototype”中添加事件滚动

[$(window), 
                resize: $.proxy(this.place, this),
                scroll: $.proxy(this.place, this)
            ]

【参考方案4】：

我不知道为什么，但是定位是基于滚动的，所以你需要在 bootstrap-datepicker.js 中找到这段代码

scrollTop = $(this.o.container).scrollTop();

并将其重写为

scrollTop = 0;

这对我有帮助，我希望它可以帮助其他人。

【参考方案5】：

rab 提供的解决方案有效，但仍不完美，因为日期选择器在引导模式滚动时闪烁。所以我使用jquery的滚动事件来实现datepicker的平滑位置变化。 这是我的代码：

    $( document ).scroll(function()
        $('#modal .datepicker').datepicker('place'); //#modal is the id of the modal
    );

【参考方案6】：

在我的项目中使用引导日期选择器时，我也遇到了同样的问题。我使用了另一种方法，在 bootstrap-datepicker.js 内的 datepicker 模板内创建了一个隐藏的透明层（使用类名 'hidden-layer-datepicker'）并给出固定位置并占据html的全部高度和宽度。

    DPGlobal.template = '<div class="datepicker">'+ '<span class="hidden-layer-datepicker"></span><div class="datepicker-days">

现在当 datepicker modal 弹出时，新创建的 layer 将占据整个页面的宽度和高度，当用户滚动时，因为 modal 附加到 body，datepicker modal 也随之滚动。随着新层的引入，存在日期选择器输入字段的容器的内部滚动将在模式打开时被否定。

要做的另一件事是在单击隐藏层时更新 datepicker 模式关闭事件，这是使用 bootstrap-datepicker.js 中的以下代码完成的。

    // Clicked outside the datepicker, hide it
                    if (!(
                        this.element.is(e.target) ||
                        (this.picker.find(e.target).length && e.target.className != "hidden-layer-datepicker") ||
                        this.picker.is(e.target) ||
                        this.picker.find(e.target).length
                    ))
                        this.hide();
                    

【参考方案7】：

我在使用 Stefan Petre 版本的 Bootstrap-datepicker (https://www.eyecon.ro/bootstrap-datepicker) 时也遇到了这个问题，问题是 Datepicker 元素附加到主体上，这意味着它会随着主体滚动，在大多数情况下很好，但是当你有一个可滚动的模式，您需要将 Datepicker 附加到可滚动模式的 div，所以我的解决方法是更改​​ Stefan 的 bootstrap-datepicker.js 如下 -

第 28 行，更改

  .appendTo('body')

到

  .appendTo(element.offsetParent)

和第 153 行，更改

  var offset = this.component ? this.component.offset() : this.element.offset();

到

  var offset = this.component ? this.component.position() : this.element.position();

早期测试表明它可以完美滚动。

此外，您可能需要更改 Datepicker 元素的 z 顺序以使其位于模式上方（这是我最初的修复，不处理滚动，我尚未支持此更改，所以不知道是否它仍然需要）

我还没有检查过，但我怀疑 Github 版本的 Bootstrap-datepicker.js 正在做同样的事情（虽然源代码与我从 Stefan 那里得到的有很大不同）