Override jQuery UI Datepicker div visible strangel

Question

Something strange afoot, here:

An instance of Datepicker is showing up in a weird place as a single bar in the upper left hand corner of this page.

I'm using both jQuery UI's Datepicker and Accordion on a page. In the CSS for the UI, the display:none for Datepicker seems to be overridden by the display:block for the Accordion, at least according to Firebug (see img below).

Then, once the Datepicker trigger is clicked in the 'catering/event room' tab (click one of the buttons to show div with Datepicker,) the display:none seems to then work.

Here's what the bad div looks like:

and here's the Firebug panel:

Answer 1

The problem is down to the element the datepicker is being binded to not yet being available.

The solution I found was to initalize the datepicker when the actual element has been clicked and then showing it straight after initalization. This ensures the element is available before the datepicker has been binded to it and initalized.

$(function() {
  $(".date_input").click(function() {
    $(this).datepicker();
    $(this).datepicker("show");
  });
});

....

<input type="text" class='date_input' />