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:

The second one looks like this:

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 puter, 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?

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:

The second one looks like this:

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 puter, 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?

• javascript
• jquery
• calendar
• datepicker

2 Answers 2

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);
    }
});

I used atom.gregg's answer to e up with the solution:

$("#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,
            });
        });
    }
});