Updating to latest JQuery UI and datepicker is causing the datepicker to always be seen

Question

We have just updated to JQuery 1.5.2.min and JQuery-ui-1.8.11.min and are using the latest datepicker.js files as well (I say files because we are using some of the localized versions of the datepicker also).

Before we updated we used the following code to initialize and use the datepicker and set the locale

$.datepicker.setDefaults($.datepicker.regional['']);

$('.datepicker').keypress(function()
{
    $(this).datepicker('hide');
});

$('.datepicker').datepicker();
$('.datepicker').datepicker('option', $.datepicker.regional[widgetCulture]);
$('.datepicker').datepicker('option', 'showAnim', '');
$('.datepicker').datepicker('setDate', new Date());

Since the update, when you scroll to the bottom of the screen where the datepicker is used, you can see it below all the controls. Its just floating there! Once you click on a field that the datepicker is associated with, it appears where it should and then does not appear at the bottom of the screen again until you refresh the page. When I comment out everything but the .datepicker() line all I see is a grey bar instead of the entire calendar which is a tad better, I suppose (not really), but still needs to be fixed. Any other line of the above code makes the entire calendar appear. This is severely frustrating!

Can someone please shed some light on this?

Answer 1

I've had this same bug for a while and just got around to looking at it tonight. I'm not sure why this bug occurs, but the following is what I've done to eliminate the visual artifact on the screen. Right after you create your datepicker(s), execute the following:

$('#ui-datepicker-div').css('display','none');

Caveat: When I look at the dom generated by Safari and step through the code that creates the datepicker, the code above appears to do nothing to the dom, but it does hide the visual affect on the screen.

Answer 2

I prefer to fix this with CSS:

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

Answer 3

it happens to me as well, I have jquery and Keith-Wood datepicker (http://keith-wood.name/datepick.html) libraries at the same html. I try to use #ui-datepicker-div {display: none;} as mentioned above but it fixed the problem but it made the Keith-Wood datepicker disappear as well.

I am using jquery 1.8.2 , jquery-ui.js (1.10.2), and even theme also 1.10.2. So I change jquery-ui and the theme back to 1.8.2 which is same version as the jquery.js. it fixed the problem, the grey line didn't appear anymore. I think the better solution is to use same version for all jquery libraries