For some or other annoying reason, my jQueryUI datepicker controls start exhibiting a weird bug where on page load, the normally hidden control calender was appearing right at the bottom of the page. Clicking on the launch control would then bring up the calendar correctly, and on selection or unfocus would then hide it again correctly. So only on page load then.

Luckily the fix to this annoying problem is actually nothing more than a simple CSS rule which you can add to the top of the affected page. (Note that this is after I spent a fair amount of time updating all my javascript plugins and trawling through the code to try and find the problem).

To solve, simply add:

#ui-datepicker-div { display: none; }

Yup, nothing more than that and your unwanted extra space at the bottom of the page is done for.

Nifty. (And yes, I still regard the jQuery and jQueryUI combo’s datepickers as one of the best ones currently available to website designers!)

Related Link: