Override jQuery UI Datepicker div visible strangely on first page load.

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 usin

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

....