JqueryUI datepicker 的定位：如何设置其相对于自动显示位置的位置？答案

【问题标题】：Positioning of JqueryUI datepicker: how to set its position relative to where it would automatically show up?JqueryUI datepicker 的定位：如何设置其相对于自动显示位置的位置？
【发布时间】：2014-10-22 18:47:14
【问题描述】：

我有一个搜索页面，上面有一个过滤框。此框中有两个日期过滤器，之前和之后。每个日期过滤器都使用 jquery ui-datepicker。第一个看起来像这样：

第二个是这样的：

我需要将“之前”框（图 2）的日历显示在与“之后”框（图 1）相同的位置。我不认为我可以硬编码第二个日历的位置，因为虽然这可能在我的计算机上工作，但更宽或更小的屏幕可能会将它放在错误的位置。我也不能将它设置为相对值，因为它的位置已经使用绝对值设置。如何让第二个日历显示出来，比如在自动显示位置左侧 200 像素处？

【问题讨论】：

标签： javascript jquery calendar datepicker

【解决方案1】：

我用atom.gregg的回答想出了解决办法：

$("#beforedate").datepicker({
    beforeShow: function(input, inst) {
        setTimeout(function () {
            var offsets = $("#afterdate").offset();
            var top = offsets.top + 25;
            inst.dpDiv.css({
                top: top,
                left: offsets.left,
            });
        });
    }
});

【讨论】：

【解决方案2】：

我最初认为您需要连接到“onshow”事件，所以按照这个思路，我发现了这个 SO 问题：How to change jquery ui datepicker position?

在该帖子下面示例中显示的事件处理程序中，您可以正确设置位置，即。相对于其他控件。

$("#datepicker").datepicker({
    beforeShow: function (input, inst) {
        setTimeout(function () {
            inst.dpDiv.css({
                top: 100,
                left: 200
            });
        }, 0);
    }
});

【讨论】：