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 have been similar problems. It would launch once and not a 2nd time under different tabs. I used a class instead of an id, and used the same class name everywhere. To me it appears datepicker activates once and the original initialization has to be used everywhere. One can probably code around this with the destroy api, but for me it was easy to simply use the same class everywhere.

Answer 2

I had the same problem using JQuery-UI 1.8.21, and JQuery-UI 1.8.22.

Problem was because I had two DatePicker script, one embedded with jquery-ui-1.8.22.custom.min.js and another one in jquery.ui.datepicker.js (an old version before I upgrade to 1.8.21).

Deleting the duplicate jquery.ui.datepicker.js, resolve problem for both 1.8.21 and 1.8.22.

Answer 3

In case you are having this issue when working with WordPress control panel and using a ThemeRoller generated theme - be sure that you are using 1.7.3 Version of theme, 1.8.13 will not work. (If you look closely, the element is being rendered, but .ui-helper-hidden-accessible is causing it to not be displayed.

Current WP Version: 3.1.3

Answer 4

I have found a trick solution. You can use the below codes.

$(".datepicker").datepicker({
/* any options you want */
beforeShowDay: function (date) {
    $('#ui-datepicker-div').css('clip', 'auto');
    return [true, '', ''];
    }
});

Answer 5

Had the same problem that the datepicker-DIV has been created but didnt get filled and show up on click. My fault was to give the input the class "hasDatepicker" staticly. jQuery-ui hat to set this class by its own. then it works for me.

Answer 6

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

This just works for IE, so I apply this hack and works fine on FF, Safari and others.