9

我正在使用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/

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

4

7 回答 7

13

有 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 );        
    }
);
于 2013-12-10T08:04:26.860 回答
2

这是使用 jQuery 的另一种方式

var checkout = $(".calendar").datepicker({});
$( "#myModal" ).scroll(function() {
    $('.calendar').datepicker('place')
});
于 2013-12-10T08:46:36.083 回答
0

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

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

并将其重写为

scrollTop = 0;

这帮助了我，我希望它会帮助其他人。

于 2015-01-15T08:35:35.877 回答
0

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

[$(window), {
                resize: $.proxy(this.place, this),
                scroll: $.proxy(this.place, this)
            }]
于 2014-11-05T13:22:56.993 回答
0

在我的项目中使用引导日期选择器时，我也遇到了同样的问题。我使用了另一种方法，在其中我在bootstrap-datepicker.js内的 datepicker 模板内创建了一个隐藏的透明层（使用类名 'hidden-layer-datepicker'），并给出了固定位置并占据了 html 的全部高度和宽度。

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

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

要做的另一件事是在单击隐藏层时更新 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();
                    }
于 2016-12-09T12:10:55.860 回答
0

我在使用 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 顺序以使其位于模式上方（这是我最初的修复，不处理滚动，我还没有支持此更改，所以不知道它是否仍然需要)

我还没有检查过，但我怀疑 Bootstrap-datepicker.js 的 Github 版本正在做同样的事情（虽然源代码与我从 Stefan 那里得到的有很大不同）

于 2018-12-06T03:35:36.837 回答
0

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

    $( document ).scroll(function(){
        $('#modal .datepicker').datepicker('place'); //#modal is the id of the modal
    });
于 2015-08-27T02:15:38.270 回答