Question

我正在使用标准的jQuery UI datepicker，但是当我滚动页面时，日期选择器仍然是固定的。任何想法如何解决这个问题？

此致尼尔

Answer 1

问题是，日期选择器在外面 div overflow: scroll;。如果在容器内生成了datepicker，那么这不会有问题。

解决方案：http://jsfiddle.net/jbK6a/15/

我使用beforeShow事件将datepicker放在输入后面。

我在可滚动容器上使用position: relative;，以便de absolute元素侦听容器。

Answer 2

稍微摆弄我设法得到以下内容：

http://jsfiddle.net/jbK6a/12/

使用此功能，datepicker会在页面滚动时隐藏自身。我相信有jQuery方法可以确定滚动位置，所以稍微摆弄一下，你可以手动操作datepicker并根据这个值更新它的位置......

<强>更新：只是摆弄了一下并得到：http://jsfiddle.net/jbK6a/18/滚动了日期选择器，但它真的很乱，任何数量的东西都可以打破它，特别是其他可折叠的元素。幸运的是，Sem有一个更好，更清洁的解决方案：）

（不过我以为我会添加我的代码）

Answer 3

为了在jQuery UI 1.11.4中解决这个问题，我在datepicker实例化的末尾添加了一个.bind（）事件：

$("*selector*").datepicker({
  *settings*
}).bind('click',function () {
  $("#ui-datepicker-div").appendTo("*other-selector*");
});

在我的情况下，＆＃34;其他选择器＆＃34;是$（this）.closest（＆＃39; the-date-input-parent ＆＃39;）。这会选择单个#ui-datepicker-div框（jQuery UI放在DOM的末尾）并将其移动到文档中其他位置。这可以在同一页面上为多个日期选择器完成。

other-selector 应该有位置：relative;设置，以便绝对定位＃ui-datepicker-div相对于新父级定位。一旦这样，它滚动就好了。

此解决方案是解决此问题的最简单方法（尽管需要花费大量时间并进行搜索才能得出结论）并允许日期选择器在移动设备和平板电脑上正常工作，否则将无法使用。

Answer 4

使用Bootstrap和datepicker无法找到任何答案，因为在模式上滚动时，日期选择器会保持附加到元素的问题。这是我的解决方案：

 var dateModals = (function() {
    'use strict';

    var currentInput = '';

    var setPos = function() {
        if (currentInput === '') return false;
        var $datepicker = $('.datepicker');
        var topPos = currentInput.offset().top + currentInput.outerHeight();
        if ($datepicker.hasClass('datepicker-orient-bottom')) {
            topPos -= $datepicker.outerHeight() + currentInput.parent('.date').outerHeight();
        }
        $datepicker.css('top', topPos);
    };

    var attachEvents = () => {
        $('.modal').on('scroll', function() {
            setPos();
        });

        $('.modal').on('click', '.date input.form-control', function() {
            currentInput = $(this);
        });
    };

    var initialize = (function() {
        attachEvents();
    })();

})();

如果遵循Bootstrap＆amp; Datepicker语法，这应该很好。

Answer 5

只需删除高度：从html选择器中删除100％规则。那解决了问题。

jQuery日期选择器不随页面滚动移动

5 个答案: