jquery-ui датапикер змінити z-індекс

Проблема досить пряма, хоча мені важко зрозуміти, як її вирішити.

Я використовую jQuery-ui datepicker разом із виконаним на замовлення перемикачем увімкнення / вимкнення стилю ios. Цей перемикач використовує деякі абсолютно розташовані елементи, які зараз відображаються поверх мого засобу вибору дати.

дивіться потворне коло, що охоплює 6 липня нижче ...

брудний спосіб зробити це (принаймні imo) - це написати стиль в одній з моїх таблиць стилів, але я б набагато скоріше використав якийсь javascript під час запуску засобу вибору, щоб це зробити.

Я вже пробував

$('.date_field').datepicker(); 
$('.date_field').datepicker("widget").css({"z-index":100});

і

$('.date_field').datepicker({
    beforeShow: function(input, inst) { 
        inst.dpDiv.css({"z-index":100});
    }
});

але, схоже, z-індекс перезаписується кожного разу, коли запускається програма вибору дати.

будь-яка допомога вітається!

Ваш код JS у питанні не працює, оскільки jQuery скидає styleатрибут віджета datepicker кожного разу, коли ви його викликаєте.

Самий простий спосіб , щоб перевизначити його style«S z-indexє з !importantправилом CSS , як уже згадувалося в іншому відповіді . Ще одна відповідь пропонує налаштування position: relative;та z-indexна сам елемент введення, який буде автоматично скопійовано у віджет Datepicker.

Але, як вимагається, якщо з якоїсь причини вам дійсно потрібно встановити його динамічно, додавши на вашу сторінку більше непотрібного коду та обробки, ви можете спробувати це:

$('.date_field').datepicker({
    //comment the beforeShow handler if you want to see the ugly overlay
    beforeShow: function() {
        setTimeout(function(){
            $('.ui-datepicker').css('z-index', 99999999999999);
        }, 0);
    }
});

Скрипка

Я створив відкладений об'єкт функції для встановлення z-indexвіджета, після того, як його буде скинуто користувальницьким інтерфейсом jQuery, кожного разу, коли ви його викликаєте. Це повинно вистачати вашим потребам.

Взлом CSS - це набагато менш потворне IMO, я залишаю місце в своєму CSS лише для налаштувань інтерфейсу jQuery (це прямо над налаштуваннями IE6 на моїх сторінках).

Є більш елегантний спосіб це зробити. Додайте цей CSS:

.date_field {position: relative; z-index:100;}

jQuery встановить для календаря z-index101 (на один більше, ніж відповідний елемент). positionПоле має бути absolute, relativeабо fixed. jQuery шукає батьківський елемент першого елемента, який є абсолютним / відносним / фіксованим, і приймає його 'z-index

Вам потрібно використовувати !importantречення, щоб примусити вбудоване z-indexзначення за допомогою CSS.

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

Це спрацювало для мене, коли я намагався використовувати datepicker спільно з модальним завантажувальним файлом:

$('input[id^="txtDate"]').datepicker();
$('input[id^="txtDate"]').on('focus', function (e) {
    e.preventDefault();
    $(this).datepicker('show');
    $(this).datepicker('widget').css('z-index', 1051);
});

Звичайно, змініть селектор відповідно до власних потреб. Я встановив "z-index" на 1051, оскільки z-індекс для модального режиму завантаження був встановлений на 1050.

Datepicker тепер встановлює спливаючий z-індекс на одне більше, ніж пов'язане поле, щоб тримати його перед цим полем, навіть якщо це поле знаходиться у діалоговому вікні. За замовчуванням z-індекс дорівнює 0, тому datepicker закінчується з 1. Чи є випадок, коли це не відображає datepicker належним чином? Повідомлення на форумі JQuery

Щоб отримати z-індекс 100. Вам потрібно ввести за допомогою, z-index:99;і JQueryUI оновитьz-index:100

<input style="z-index:99;"> або <input class="high-z-index">і css .high-z-index { z-index: 99; }

Ви також можете вказати z-індекс для успадкування, який повинен успадковуватися з вашого діалогового вікна, і змусити jQueryUI правильно виявляти z-індекс.

<input style="z-index:inherit;"> або <input class="inhert-z-index">і css .inherit-z-index { z-index: inherit; }

НАЙКРАЩИЙ ПРИРОДНИЙ спосіб - це просто розмістити елемент вибору дати на "платформі", яка має "відносне" положення і має вищий "z-індекс", ніж елемент, який відображається над вашим контролем ...

У моєму випадку нічого не вийшло. Мені потрібно було додати z-індекс до типу введення, який має датчик.

<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">

Це для Bootstrap datetimepicker

Якщо ваш файл вибору дат ховається через прокрутку, з'являється у вашому використанні div:

overflow-x: visible !important;
overflow-y: visible !important;

в css цілого div, який містить ваш датчик та інші елементи, такі як

.dialogModel{
    overflow-x: visible !important;
    overflow-y: visible !important;
}