jQuery datePicker ниже диалогового окна интерфейса?

Question

См. Пример

После нажатия на ссылку показать контейнер компонент подбора даты - 2-й ввод - отображается под диалоговым окном пользовательского интерфейса. Что мне нужно сделать, чтобы отобразить его над диалоговым окном интерфейса пользователя?

Answer 1

Вы можете установить z-индекс .ui-datepicker на 1003.

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

Прямо сейчас .ui-widget-overlay имеет z-index 1001, а .ui-dialog имеет z-index 1002. DatePicker не имеет z-index и по умолчанию находится ниже z-index. из этих других. Поднимите его до более высокого z-индекса, и он должен появиться над диалоговым окном.

Answer 2

У меня была похожая проблема, но в диалоге DatePicker было style="z-index:1", которое меня бесило.

Поэтому мне пришлось добавить ключевое слово !important.

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

Answer 3

Вам нужно установить z-index на указателе даты, например ::100100

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

Должно работать на вас.

Answer 4

Я исправил, добавив это на 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;
  };

Answer 5

Если это старый браузер (IE6), вам может понадобиться плагин 'BGIFrame' и установить опцию диалога, чтобы использовать его, если z-index не работал?