JqueryUI datepicker的位置:如何设置相对于自动显示位置的位置? [英] Positioning of JqueryUI datepicker: how to set its position relative to where it would automatically show up?

问题描述

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

I have a search page with a filter box on it. In this box are two date filters, Before and After. Each date filter uses the jquery ui-datepicker. The first one looks like this:

第二个看起来像这样:

我需要日期之前"框(图2)的日历显示在与日期之后"框(图1)相同的位置.我认为我无法对第二个日历的位置进行硬编码，因为虽然这在我的计算机上可能会起作用，但更大或更小的屏幕可能会将其放置在错误的位置.我也不能将其设置为相对值，因为它的位置已经使用绝对值设置了.如何显示第二个日历，例如它会自动显示在左边200px?

I need the calendar for the Before Date box (image 2) to show up in the same place as the After Date box (image 1). I don't think I can hardcode the position for the second calendar though, because while that might work on my computer, wider or smaller screens would likely have it in the wrong place. I also can't set it to a relative value, because its position is already set using absolute value. How can I make the second calendar show up, say 200px to the left of where it would automatically show up?

推荐答案

我最初以为您需要参加一个'onshow'事件，所以按照这种思路，我发现了这样的问题:

I initially thought you would need to wire into a 'onshow' event, so following that train of thought, I found this SO question: How to change jquery ui datepicker position?

在该示例下面示例中显示的事件处理程序中，然后可以正确设置位置.相对于其他控件.

In the event handler shown in the sample below from that post, you can then set the position correctly, ie. relative to the other control.

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

这篇关于JqueryUI datepicker的位置:如何设置相对于自动显示位置的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！