滚动模态时，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/

滚动模态时是否有任何解决方案使其滚动？

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

Answer 2

这是使用jQuery的另一种方式

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

Answer 3

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

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

Answer 4

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

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

并重写它

scrollTop = 0;

这对我有所帮助，我希望它会帮助另一个人。

Answer 5

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

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

Answer 6

我在项目中使用bootstrap datepicker时也遇到了同样的问题。 (with classname ) and gave fixed position and occupying full height and width of the html. 我使用了另一种方法，其中我在的datepicker模板内创建了一个隐藏的透明层（带有classname'hidden ）并给出了固定位置并占据了html的完整高度和宽度。

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

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

. 还有一件事是在点击隐藏层时更新datepicker模式关闭事件，并使用的以下代码完成。

    // 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();
                    }

Answer 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那里得到的东西大不相同）