jQuery datePicker below UI dialog?

Question

Hi,

See Example

After clicking the show container link the datepicker component - 2nd input - is shown below the UI dialog. What should I do to show it above the UI dialog?

Answer 1

You need to set the z-index on the datepicker, e.g.:

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

Should work for you.

Answer 2

You could set the z-index of .ui-datepicker to 1003.

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

Right now, .ui-widget-overlay has a z-index of 1001 and the .ui-dialog has a z-index of 1002. The datepicker has no z-index, and defaults to being below the z-index of these others. Up it to a higher z-index and it should appear above the dialog.