getting jQuery UI's datepicker to always open in a certain direction?

Question

I'm using jQuery UI's datepicker control in a position: fixed toolbar at the bottom of my page. Occasionally, on random computers, the datepicker appears below the toolbar, which means it's off the page and impossible to view or interact with.

Is there a way to force the positioning of the datepicker control to always be above and to the right of its <input>?

Answer 1

You could change the lines:

offset.left -= (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ? Math.abs(offset.left + dpWidth - viewWidth) : 0;
offset.top -= (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? Math.abs(offset.top + dpHeight + inputHeight*2 - viewHeight) : 0;

...to read:

offset.left = $(inst.input).position().left + dpWidth;
offset.top = $(inst.input).position().top - dpHeight;

This loses flexibility, though. If your input happens to be at the top of the page, you'll have the opposite problem from before.

Answer 2

From the documentation, it looks like you might be able to use the 'dialog' method of the datepicker plugin to achieve your desired outcome. However, using this most likely means that you will have to implement some of the glue that you would otherwise get out-of-the-box with datepicker, such as a callback handler to extract the date, etc.

I tried to mock up some code to see it in action and short of getting the datepicker to display, I couldn't quite get it working, though. Anyway, I wanted to point you to it in case you have better luck than I did.

Answer 3

Problem is that element in position: fixed show top position 0px (check with: alert$('#datepicker2').position()).

Solution:

$('#datepicker').datepicker( {beforeShow: function(input) {
    var x = 100; //add offset
    var y = 20; 
    field = $(input);
    left = field.position().left + x;
    bottom = y;
    setTimeout(function(){
        $('#ui-datepicker-div').css({'top':'', 'bottom':bottom + 'px', 'left': left + 'px'});      
    },1);                    
}}

Test HTML:

<form style="position:fixed; bottom:0; width:100%" name="form1" method="post" action="">
  <label>
    <input style="left:300px; position:absolute; bottom:0" type="text" name="textfield" id="datepicker">
  </label>
</form>

Answer 4

The only way to be certain (for the jQueryUI version of datepicker) is to disable the functionality of the datepicker that tries to render inside the viewport. Here's a way to do it without modifying the source code files:

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

That just nukes the _checkOffset function inside datepicker that makes it squirrelly. Then you can use the .ui-datepicker css to make sure it stays fixed if that's what you're after. More info at how-to-control-positioning-of-jqueryui-datepicker.