jQuery datePicker below UI dialog?

Question

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 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.

Answer 2

I had a similar problem but the datepicker dialog had a style="z-index:1" which was wreaking me.

So I had to add the !important keyword.

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

Answer 3

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

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

Should work for you.

Answer 4

If the its an old browser (IE6) you may need the 'BGIFrame' plugin and set the dialog option to use it, if the z-index didn't work?

Answer 5

I've fixed by adding this on JS

  //allow interaction of select2, date and time picker on jQuery UI dialog
    $.ui.dialog.prototype._allowInteraction = function(e) {
    return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-drop').length;
  };