滾動模態時，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那里得到的東西大不相同）