Using jQueryUI datepicker inside a jQuery BlockUI dialogue

Question

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

keep datepicker outside of block div,and show it as a message of block ui

 $("#blockdiv").block({
     message: $("#datepickerdiv"),
     centerX: false,centerY: false,
     css:{width:0,height:0,top:'80px',
     left:($(window).width()-539)/2+'px',border:0}
 })

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