Jquery UI Datepicker not displaying

Question

UPDATE
I have reverted back to Jquery 1.3.2 and everything is working, not sure what the problem is/was as I have not changed anything else apart of the jquery and ui library versions.
UPDATE END

I having an issue with the JQuery UI datepicker. The datepicker is being attached to a class and that part is working but the datepicker is not being displayed.

Here is the datepicker code I am using and the inline style that is being generated when I click in the input box that has the class ".datepicker".

$('.datepicker').datepicker({dateFormat:'dd/mm/yy'});

display:none;
left:418px;
position:absolute;
top:296px;
z-index:1;

If I change the display:none to display:block the datepicker works fine except it dosen't close when I select a date.

Jquery libraries in use:

• jQuery JavaScript Library v1.4.2
• jQuery UI 1.8 jQuery UI Widget 1.8
• jQuery UI Mouse 1.8 jQuery UI
• Position 1.8 jQuery UI Draggable 1.8
• jQuery UI Droppable 1.8 jQuery UI
• Datepicker 1.8

Answer 1

I was having the same problem, and I found that in my case the cause was the datepicker div for some reason is retaining the class .ui-helper-hidden-accessible, which has the following CSS:

.ui-helper-hidden-accessible {
 position: absolute !important;
 clip: rect(1px 1px 1px 1px);
 clip: rect(1px,1px,1px,1px);
}

I'm using the google CDN hosted versions of jquery, so I couldn't modify the code or the CSS. I had also tried changing the z-index without any success. The solution that worked for me was to set the clip property for the datepicker back to its default value, auto:

$('.date').datepicker();
$('#ui-datepicker-div').css('clip', 'auto');

Since this specifically targets the datepicker div, there's less of a chance of unintended side effects on other widgets than changing the ui-helper-hidden-accessible class as a whole.