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

jquery-ui jquery-ui-datepicker
ceejayoz picture ceejayoz · Oct 6, 2009 · Viewed 35.1k times · Source

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

Purrell picture Purrell · Nov 30, 2009

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

on later versions of JQuery UI try:

$.extend($.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.

Related questions

jQuery UI DatePicker - Change Date Format

I am using the UI DatePicker from jQuery UI as the stand alone picker. I have this code: <div id="datepicker"></div> And the following JS: $('#datepicker').datepicker(); When I try to return the value …

Read More
jQuery UI DatePicker to show month year only

I am using jQuery date picker to display the calendar all over my app. I want to know if I can use it to display the month and year (May 2010) and not the calendar?

Read More
How do I pre-populate a jQuery Datepicker textbox with today's date?

I have a very simple jQuery Datepicker calendar: $(document).ready(function(){ $("#date_pretty").datepicker({ }); }); and of course in the HTML... <input type="text" size="10" value="" id="date_pretty"/> Today's date is nicely highlighted for the user when they …

Read More