How to control positioning of jQueryUI datepicker

Question

The datepicker in jQueryUI renders with a dynamic position. It renders according to its css if there's enough room for it, but if there isn't enough window space it tries to render on screen. I need it to stay put and render in the same place every time, independent of the screen position or other circumstances. How can this be done with the jQueryUI datepicker? Other implementations of jQuery datepicker seem to have ways of doing this, but I don't see a way of doing it for the UI version.

The answer doesn't seem to be just modifying the css:

.ui-datepicker { width: 17em; padding: .2em .2em 0; (trying top/margin-top/position:relative, etc. here...)}

...since when the datepicker is created it dynamically creates top and left in element style. Haven't found a way around this yet. One approach I saw is to give something like this in the beforeShow option:

beforeShow: function(input,inst){
                                inst.dpDiv.css({ 
                                   'top': input.offsetHeight+ 'px', 
                                   'left':(input.offsetWidth - input.width)+ 'px'
                                               });
                                }

This has some effect but the top and left properties are still being dynamically set after this is run when the datepicker renders. It's still trying to render on screen. How do I get it to always render in the same spot? My next step is probably to go into the datepicker guts and start pulling things out. Any ideas?

Note that the answer (for the UI version) is not in:

• how-to-change-the-pop-up-position-of-the-jquery-datepicker-control
• change-the-position-of-jquery-ui-datepicker

Answer 1

Alright, this is a matter of disabling the feature it has of attempting to always render in the viewport if there's no option provided to enable/disable the feature. Luckily it's uncoupled and isolated in one function so we can just go in and override it. The following code completely disables that feature only:

$.extend(window.DP_jQuery.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});

_checkOffset is called when it's opening and it does calculations on the offset and returns a new offset if it would otherwise be outside of the view port. This replaces the function body to just pass the original offset right through. Then you can use the beforeShow setting hack and/or the .ui-datepicker css class to put it wherever you want.

Answer 2

Posting this in hopes that it will help others. At least as of v1.8.1 of datepicker, using 'window.DP_jQuery.datepicker' no longer works, because the pointer(right term?) now is named with a timestamp of its creation - so for example it would now be 'window.DP_jQuery_1273700460448'. So now, rather than using the pointer to the datepicker object, refer to it directly like this:

$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});

Many thanks for the above answer and getting me what I needed.