bootstrap-datepicker在滚动模态框时无法滚动

Question

我正在使用 bootstrap-datepicker，并希望在 bootstrap 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/

有没有办法让模态框滚动时它也跟着一起滚动呢？

- cuongle

Answer 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 );        
    }
);

- rab

---

当有滚动条时，这个方法是有效的。例如，如果我有一个占据整个屏幕的Bootstrap模态框，并且在最后一行有一个日期选择器。如何处理这种情况？日期选择器会出现在屏幕下方。 - Shujaath Khan

我刚刚将滚动绑定到模态框而不是文档上。但它运行得很好。谢谢！！ - vfranchi

请查看这个fiddle。我用它解决了一个类似的问题 https://dev59.com/e2ct5IYBdhLWcg3wF5tF http://jsfiddle.net/jbK6a/15/ - deffrin joseph

Answer 2

以下是使用jQuery的另一种方法：

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

- A Paul

---

现在变量被使用了吗？ - deadend

Answer 3

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

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

并将其重写为

scrollTop = 0;

这对我有帮助，希望它也能帮到其他人。

- user3434437

Answer 4

rab提供的解决方案虽然有效，但在bootstrap模态框滚动时日期选择器仍会闪烁。因此，我使用了jQuery的滚动事件来实现日期选择器平滑位置变化。

以下是我的代码：

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

- SudarP

Answer 5

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

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

- Ch Ra

Answer 6

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

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

现在，当日期选择器弹出模态框时，新创建的层将占据整个页面的宽度和高度，并且当用户滚动时，由于模态框附加到body上，日期选择器模态框也会随之滚动。引入新层后，容器内部滚动条在模态框打开时将被抵消。

还有一件事要做的是，在单击隐藏层时更新日期选择器模态框关闭事件，可以使用以下代码在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();
                    }

- Nithin Chacko

Answer 7

我在使用Stefan Petre的Bootstrap-datepicker（https://www.eyecon.ro/bootstrap-datepicker）时也遇到了这个问题，问题是Datepicker元素附加到了body上，这意味着它会随着body一起滚动，在大多数情况下都没问题，但是当你有一个可滚动的模态框时，你需要将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-order，使其位于模态框上方（这是我的初始修复，但未处理滚动，我尚未撤消此更改，因此不知道是否仍然需要）

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

- steve