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

Answer 1

$("first-selector").datepicker().bind('click',function () {
      $("#ui-datepicker-div").appendTo("other-selector");
});

<style>
#ui-datepicker-div {
        position: absolute !important;
        top: auto !important;
        left: auto !important;
        z-index: 99999999 !important;
}
</style>

Answer 2

By default the calendar of the date picker was display to the upper-right of my input box, so the top of it was hidden by my menu bar. Here's how I positioned the widget (jquery-ui version 1.11.4) very simply (note that 'ui-datepicker' is the class name given by jquery-ui):

$(document).ready(function() {
$(".ui-datepicker").css('margin-left', '-50px', 'margin-top', '-50px');
//... 
}

Answer 3

bind focusin after using datepicker change css of datepicker`s widget wish help

$('input.date').datepicker();
$('input.date').focusin(function(){
    $('input.date').datepicker('widget').css({left:"-=127"});
});

Answer 4

The accepted answer works very well overall.

However, using jQuery UI v1.11.4, I had an issue where the datepicker would position itself away from the input in a modal window (fixed positioning) when the browser window has been scrolled down. I was able to fix this problem editing the accepted answer as follows:

const checkOffset = $.datepicker._checkOffset;

$.extend($.datepicker, {
  _checkOffset: function(inst, offset, isFixed) {
    if(isFixed) {
      return checkOffset.apply(this, arguments);
    } else {
      return offset;
    }
  }
});

Answer 5

here is a more simple solution

var $picker = $( ".myspanclass" ).datepicker(); // span has display: inline-block
$picker.find('.ui-datepicker').css('margin-left', '-50px');

Answer 6

Edit: JaredC gave an updated answer for later versions of jQuery above. Switching accepted answer to that.

Alright, this is a matter of monkeypatching the feature it has of attempting to always render in the viewport since 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.