jQuery datePicker под диалоговым окном пользовательского интерфейса?

Question

См. Example

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

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

Если вашему старым браузерам (IE6) может понадобиться плагин «BGIFrame» и установить параметр диалога, чтобы использовать его, если z-индекс не работал?

Answer 4

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

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

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

Answer 5

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