Append jQueryUI datepicker to div (错误的显示位置)

Question

我在输入上使用 jQueryUI 日期选择器，默认情况下 jQueryUI 将 #ui-datepicker-div 附加到文档的 body。

有问题的输入在屏幕上的“弹出窗口”div 中，这意味着在 div 之外的任何点击都会关闭“弹出窗口”。

因为 jQueryUI 将日期选择器附加到正文，当我单击日期选择器时，“弹出窗口”消失了...所以我尝试使用 ...

$("#myInput").datepicker({
  ...
  beforeShow: function() {
    $("#ui-datepicker-div").appendTo($("#myPopupDiv"));
  }
});

问题是 jQueryUI 然后根据位置在 #ui-datepicker-div 上设置 top 和 left CSS 样式相对于主体...但我需要它相对于“弹出窗口”div.

我试过将 position:relative 设置为 #myPopupDiv。我还尝试将 top 和 left 设置为 beforeShow 的一部分，但这些值会立即被覆盖。

有什么方法可以正确定位吗？

请看下面的简单示例，其中输入为 50px/100px，但日期选择器现在显示为 100px/200px...

$("input").datepicker({
  beforeShow: function() {
    $("#ui-datepicker-div").appendTo($("#myPopup"));
  }
});

#myPopup {
  position:absolute;
  top:50px;
  left:100px;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="myPopup">
  <input>
</div>

Answer 1

单例的位置可以用$.datepicker._pos = [x, y]设置。

但是，每次出现日期选择器对话框时，都会将 _pos 设置为 null，因此会在后续使用时重新计算位置。

在您的情况下，以下将在每次开仓前设置仓位。

$("input").datepicker({
    beforeShow: function() {
        $.datepicker._pos = [20, 0];
        $("#ui-datepicker-div").appendTo($("#myPopupDP"));
    }
});

Append jQueryUI datepicker to div (错误的显示位置)

Append jQueryUI datepicker to div (wrong display position)

javascript

css

jquery

datepicker