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

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

代码：

Launch Modal 
 
 
Choose Date:  
 
  

和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 （带有类名‘hidden-layer-datepicker’ ）内的datepicker模板内创建了一个隐藏的透明层，并给出了固定位置并占据了html的完整高度和宽度。

  DPGlobal.template = '
'+ '
 

现在当弹出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(); }