jquery-ui datepicker изменить z-index

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

Я использую 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-index перезаписывается каждый раз при запуске datepicker.

любая помощь приветствуется!

Ваш 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 гораздо менее уродлив, ИМО, я резервирую место в моем CSS только для настроек пользовательского интерфейса jQuery (это прямо над настройками IE6 на моих страницах).

Есть более элегантный способ сделать это. Добавьте этот CSS:

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

jQuery установит для календаря z-indexзначение 101 (на один больше, чем соответствующий элемент). 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-index для модального окна начальной загрузки был установлен на 1050.

Средство выбора даты теперь устанавливает для всплывающего z-индекса на единицу больше, чем связанное с ним поле, чтобы он оставался перед этим полем, даже если это поле само находится во всплывающем диалоговом окне. По умолчанию z-index равен 0, поэтому datepicker заканчивается на 1. Есть ли случай, когда он не показывает должным образом datepicker? Сообщение на форуме JQuery

Чтобы получить z-index, z-index:99;равный 100. Вам нужен ввод с помощью, и JQueryUI обновит datepicker доz-index:100

<input style="z-index:99;"> или <input class="high-z-index">и css .high-z-index { z-index: 99; }

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

<input style="z-index:inherit;"> или <input class="inhert-z-index">и css .inherit-z-index { z-index: inherit; }

ЛУЧШИЙ ЕСТЕСТВЕННЫЙ способ - просто поместить элемент выбора даты на «платформу», которая имеет «относительную» позицию и более высокий «z-index», чем элемент, который отображается над вашим контролем ...

В моем случае ничего не получилось. Мне нужно было добавить z-index к типу ввода, у которого есть datepicker.

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

Это для Bootstrap datetimepicker

Если ваш datepicker скрывается из-за того, что в вашем div появляется прокрутка:

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

в css всего div, содержащего ваш datepicker и другие элементы, такие как

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