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

Question

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

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

问候， 尼尔

Answer 1

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

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

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

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

Answer 2

稍微摆弄一下，我设法得到了以下信息：

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

使用它，日期选择器将自己隐藏在页面滚动中。我相信有 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*");
});

就我而言，“其他选择器”是 $(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 语法，这应该可以很好地发挥作用。