Using jQueryUI datepicker inside a jQuery BlockUI dialogue

Question

Hi, trying to get a jQueryUI datepicker working within a jQuery blockUI dialogue but it appears behind the blockUI dialogue, i.e. in the blanked out area, and when trying to choose a date it disappears but the value not posted.

js code is simply;

$('#datePicker').datepicker({ inline: true });

against which is part of the blockUI markup to create the dialogue.

Using;

jquery-1.3.2.min.js jquery-ui-1.7.2.custom.min.js jquery.blockUI.js

Cheers

Answer 1

I just ran into the same issue. I found the answer here http://stackoverflow.com/questions/715677/trouble-with-jquery-dialog-and-datepicker-plugins

Answer 2

Yes, you need to set the z-index to be greater than the dialog layer. I used this CSS rule to fix that issue.

.ui-datepicker { z-index : 9999; }