Jquery datePicker

Question

I have slight issue with the jquery datepicker in that it displays ABOVE the target box. This is due to the way my page is set up. I found the issue with CSS in my page via firebug, unfortunately it conflicts with about 20 elements.

Next I tried hooking into the "beforeShow event" which works but then after the event fires it just recalculates and puts it where ever it wants.

 beforeShow: function() {
                $('#ui-datepicker-div').show();
                var offset = $('#ui-datepicker-div').offset();
                $('#ui-datepicker-div').css({
                    top: (offset.top + 222) + 'px'
                })
            }

Does anyone else have any ideas how how I can reposition this? I just need to move it down by about 200 odd pixels.

Answer 1

Overriding the _showDatepicker function seems to work:

(function() {
var orig = jQuery.datepicker._showDatepicker;

jQuery.datepicker._showDatepicker = function(input){
    orig.apply(this, arguments);
    $('#ui-datepicker-div').css('top', '100px');
}
})();