it-swarm.com.ru

jQuery-UI DatePicker изменить Z-индекс

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

Я использую jQuery-ui datepicker вместе с пользовательским «переключателем в стиле ios on/off». В этом переключателе используются некоторые абсолютно позиционированные элементы, которые в настоящее время отображаются в верхней части окна выбора даты.

увидеть уродливый круг, покрывающий 6 июля ниже ...

enter image description here

грязный способ сделать это (по крайней мере, 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 перезаписывается при каждом запуске средства выбора даты.

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

74
Greg Guida

Ваш JS-код в вопросе не работает, потому что jQuery сбрасывает атрибут style виджета datepicker при каждом его вызове.

Простой способ переопределить z-indexstyle - использовать CSS-правило !important, как уже упоминалось в другой ответ . Еще один answer предлагает установить 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);
    }
});

Fiddle

Я создал объект отложенной функции для установки z-index виджета, после того как он будет сброшен с помощью пользовательского интерфейса jQuery при каждом его вызове. Это должно удовлетворить ваши потребности.

Хакерство CSS гораздо менее уродливо, я зарезервировал место в моем CSS только для настроек jQuery UI (это прямо над настройками IE6 на моих страницах).

127
Fabrício Matté

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

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

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

83
Marek Roj

Вы должны использовать предложение !important для принудительного использования встроенного значения z-index с помощью CSS.

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

Это сработало для меня, когда я пытался использовать 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.

4
David Hicks

DatePicker теперь устанавливает всплывающий z-индекс на единицу больше, чем его связанное поле, чтобы держать его перед этим полем, даже если это поле само находится во всплывающем диалоге. По умолчанию z-index равен 0, поэтому средство выбора даты заканчивается на 1. Имеется ли случай, когда он не отображает средство выбора даты должным образом? 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-index для наследования, который должен наследоваться из вашего диалогового окна и заставить jQueryUI правильно определять z-index.

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

3
Loren

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

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

Это для Bootstrap datetimepicker

Если ваш DatePicker скрывается из-за прокрутки появляется в вашем использовании Div:

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

в CSS целого div, который содержит ваш DatePicker и другие элементы, такие как

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

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

0
clinton