twitter-bootstrap bootstrap-datepicker 在滚动模态时不滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20488734/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap-datepicker does not scroll when scrolling the modal
提问by cuongle
I am using bootstrap-datepickerand would like to show the date-picker on the modal of bootstrap 2. The problem I got is the date-picker is not scrolling accordingly when scrolling the modal, it is still remained.
我正在使用bootstrap-datepicker并想在 bootstrap 2 的模态上显示日期选择器。我遇到的问题是日期选择器在滚动模态时没有相应地滚动，它仍然存在。
The code:
代码：
<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>
and javascript:
和 javascript：
var datePicker = $(".calendar").datepicker({});
The jsfiddler: http://jsfiddle.net/csrA5/
jsfiddler：http: //jsfiddle.net/csrA5/
Is there any solution to make it scroll when scrolling the modal?
滚动模态时是否有任何解决方案可以使其滚动？
回答by rab
There is option datepicker('place')to update position . I have updated jsfiddle
有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 );
}
);
回答by A Paul
Here is another way using jQuery
这是使用 jQuery 的另一种方式
var checkout = $(".calendar").datepicker({});
$( "#myModal" ).scroll(function() {
$('.calendar').datepicker('place')
});
回答by Ch Ra
Try to add the event scroll in bootstrap-datepicker.js, in function "Datepicker.prototype"
尝试在 bootstrap-datepicker.js 中添加事件滚动，在函数“Datepicker.prototype”中
[$(window), {
resize: $.proxy(this.place, this),
scroll: $.proxy(this.place, this)
}]
回答by user3434437
I dont know why, but positioning is based on scrolling so you need to find this code in bootstrap-datepicker.js
我不知道为什么，但是定位是基于滚动的，所以你需要在 bootstrap-datepicker.js 中找到这个代码
scrollTop = $(this.o.container).scrollTop();
and rewrite it to
并将其重写为
scrollTop = 0;
This helped me, i hope it will help another people.
这对我有帮助，我希望它能帮助其他人。
回答by SudarP
Solution provided by rab works but still not perfect as the datepicker flickers on scroll of bootstrap modal. So I used the jquery's scroll event to achieve smooth position change of datepicker. Here's my code:
rab 提供的解决方案有效，但仍然不完美，因为日期选择器在引导模式的滚动条上闪烁。所以我使用jquery的scroll事件来实现datepicker的平滑位置变化。这是我的代码：
$( document ).scroll(function(){
$('#modal .datepicker').datepicker('place'); //#modal is the id of the modal
});
回答by Nithin Chacko
I too faced the same issue while using bootstrap datepicker in my project. I used an alternate method where in i created a hidden transparent layer inside the datepicker template inside bootstrap-datepicker.js(with classname 'hidden-layer-datepicker') and gave fixed position and occupying full height and width of the html.
在我的项目中使用 bootstrap datepicker 时，我也遇到了同样的问题。我使用了另一种方法，在其中我在bootstrap-datepicker.js 中的 datepicker 模板中创建了一个隐藏的透明层（类名'hidden-layer-datepicker'）并给出了固定位置并占据了 html 的整个高度和宽度。
DPGlobal.template = '<div class="datepicker">'+ '<span class="hidden-layer-datepicker"></span><div class="datepicker-days">
Now when the datepicker modal pops up, the newly created layer will occupy the entire page width and height and when the user scrolls since the modal is appended to body, the datepicker modal too scrolls with it. With the introduction of the new layer, the inner scroll of the container in which the datepicker input field is present, will be negated while the modal is open.
现在，当日期选择器模式弹出时，新创建的图层将占据整个页面的宽度和高度，并且当用户滚动时，因为模式已附加到正文，日期选择器模式也会随之滚动。随着新层的引入，当模态打开时，存在日期选择器输入字段的容器的内部滚动将被取消。
One more thing to do is to update the datepicker modal closing event when clicking on the hidden layer and that is done using the below code inside bootstrap-datepicker.js.
要做的另一件事是在单击隐藏层时更新 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();
}
回答by steve
I ran into this problem aswell with Stefan Petre's version of Bootstrap-datepicker (https://www.eyecon.ro/bootstrap-datepicker), the issue is the Datepicker element is attached to the body which means it will scroll with the body, fine in most cases but when you have a scrollable modal you need to attach the Datepicker to the scrollable modal's div instead, so my fix was to change Stefan's bootstrap-datepicker.js as follows -
我在使用 Stefan Petre 版本的 Bootstrap-datepicker ( https://www.eyecon.ro/bootstrap-datepicker) 时也遇到了这个问题，问题是 Datepicker 元素附加到主体上，这意味着它会随着主体滚动，在大多数情况下很好，但是当你有一个可滚动的模式时，你需要将 Datepicker 附加到可滚动模式的 div，所以我的解决方法是按如下方式更改 Stefan 的 bootstrap-datepicker.js -
line 28, change
第 28 行，更改
.appendTo('body')
to
到
.appendTo(element.offsetParent)
and line 153, change
和第 153 行，更改
var offset = this.component ? this.component.offset() : this.element.offset();
to
到
var offset = this.component ? this.component.position() : this.element.position();
Early tests shows it scrolls perfectly.
早期测试表明它可以完美滚动。
In addition you may need to change the z-order of the Datepicker element to make it sit above the modal (this was my initial fix which did not deal with scrolling, I have not backed this change out yet so dont know if its still needed)
此外，您可能需要更改 Datepicker 元素的 z 顺序以使其位于模态上方（这是我的初始修复，不涉及滚动，我尚未支持此更改，因此不知道是否仍然需要)
I haven'y checked but I suspect the Github version of Bootstrap-datepicker.js is doing the same thing (the sourcecode is much different to what I have from Stefan though)
我已经检查过，但我怀疑 Bootstrap-datepicker.js 的 Github 版本正在做同样的事情（尽管源代码与我从 Stefan 那里得到的有很大不同）
