Question

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

enter image description here

代码：

<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时也遇到了同样的问题。我使用了另一种方法，其中我在 bootstrap-datepicker.js （带有classname 'hidden-layer-datepicker'）的datepicker模板中创建了一个隐藏的透明层，并给出了固定位置并占据html的全高和宽度。

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

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

还有一件事是在点击隐藏图层时更新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();
                    }

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那里获得的代码有很大不同）

滚动模态时，bootstrap-datepicker不会滚动

7 个答案: