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

Question

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

http://jsfiddle.net/jbK6a/3/

问候， 尼尔

Answer 1

问题在于日期选择器在div 和overflow: scroll; 之外。如果日期选择器是在容器内生成的，这不会有问题。

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

我将日期选择器放在带有beforeShow 事件的输入后面。

我在可滚动容器上使用了position: relative;，以便绝对元素监听容器。

Answer 2

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

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

使用这个，日期选择器隐藏在页面滚动上。我相信有 jQuery 方法可以确定滚动位置，因此稍微麻烦一点，您可以手动操作日期选择器并根据此值更新其位置...

更新： 只是摆弄了一下，得到：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*");
});

在我的例子中，“其他选择器”是 $(this).closest('the-date-input-parent')。这会拾取单个 #ui-datepicker-div 框（jQuery UI 放置在 DOM 的末尾）并将其移动到文档中的其他位置。这可以为同一页面上的多个日期选择器完成。

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

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

Answer 4

只需从 html 选择器中删除 height: 100% 规则。这样就解决了问题。

Answer 5

使用 daterangepicker 插件，我们必须添加新选项 parentEl

 <div class="container">
        <h2>Modal Example</h2>
        <!-- Button to Open the Modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
            Open modal
        </button>

        <!-- The Modal -->
        <div class="modal" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">Modal Heading</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">
                        <input type="text" name="dates" value="01/01/2018 - 01/15/2018" />
                       

                    </div>

                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>

                </div>
            </div>
        </div>

    </div>

    <script>
        $(function() {
            $('input[name="dates"]').daterangepicker({
                parentEl: $('#myModal'),
                showDropdowns: true,
            });

        });
    </script>

Answer 6

使用 Bootstrap 和 datepicker 无法找到任何答案，在模式上滚动时 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 和 Datepicker 语法，这应该很好玩。