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

83

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

Я использую 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.

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

Грег Гуида
источник
3
Я считаю правило css! Important на css вашей страницы намного более чистым, чем javascript, поскольку z-index является свойством CSS и предназначен для стилизации. Если бы мне пришлось делать JS-решение, оно бы добавляло styleтег в заголовок - не только его наличие в CSS делает ваш JS-код короче и чище, но и беспрепятственно применяется ко всем экземплярам datepickers.
Fabrício Matté
1
Возможный дубликат stackoverflow.com/questions/715677/…
Лэнс
@Lance не дурак, потому что я спрашиваю, как это можно сделать динамически, не добавляя строчку в css
Грег Гуида
@ FabrícioMatté Думаю, я просто не хочу испортить свой css каким-нибудь дурацким переопределением для jquery-ui edge-case. styleТег в голове немного ближе к тому , что им ищет , но то , что я действительно хочу сделать , это изменить атрибут стиля на элементе дата-подборщика.
Greg Guida
Я уже зарезервировал место в нижней части файла CSS только для взлома jQuery UI в каждом проекте, который я начинаю, но да, я отправил ответ с чистым решением jQuery, объясняющим, почему CSS будет более чистым решением, теперь вы можете выбрать, какой из них использовать. =]
Fabrício Matté

Ответы:

143

Ваш 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 на моих страницах).

Фабрисио Матте
источник
5
Могу я просто сказать вам, как сильно вы качаетесь !? Сначала попробовал множество других вещей. Спасибо!
Bretticus
спасибо за ваш ответ, он работает, однако как только datepicker обновляется (например, вы меняете месяц), z-index возвращается к значению по умолчанию, поэтому я думаю, что этот ответ потребует небольшой корректировки, то есть добавления следующего onChangeMonthYear: function () {setTimeout (function () {$ ('. ui-datepicker'). css ('z-index', 99999999999999);}, 0); }
Gombo
@Gombo Я считаю, что будет проще использовать один из подходов CSS (описанных выше JS), поскольку они гораздо менее хакерские. ;)
Fabrício Matté
По крайней мере, в FF максимальное число составляет 10 цифр, поэтому девять девяток могут быть лучше (хотя FF с радостью конвертирует в 2147483647 без ошибок).
Campbeln 03
+1 за указание z-indexна вход DOM. Это единственное, что сработало для меня:<input .... style="z-index: 9999;"/>
Себастьян
88

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

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

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

Марек Рой
источник
2
Это однозначно лучшее решение. +1
Пол Чемберлен
Работал как шарм! Спасибо
brando
Идеально, но в моем случае: .datepicker-dropdown {z-index: 999999!
Important
Почти идеально, но он не работает, если вы не знаете максимальное значение zindex, для которого вы хотите, чтобы datepicker наложил себя.
MFAL
21

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

.ui-datepicker{z-index: 99 !important};
Эмануэле Греко
источник
Извините, у меня не работает - z-index задается для элемента jQuery, который имеет более высокий приоритет, чем! Important
Дилан Гамильтон-Фостер,
1
@ Дилан Хэмилтон-Фостер, ты уверен? Не могли бы вы добавить какой-нибудь другой тег, например BackgroundColor, чтобы увидеть, действительно ли применяется стиль?
Эмануэле Греко
7

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

Дэвид Хикс
источник
5

Средство выбора даты теперь устанавливает для всплывающего 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; }

Лорен
источник
1

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

клинтон
источник
4
Пожалуйста, добавьте содержательный код и опишите подробнее своиBEST NATURAL way
Питер
1

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

<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">
Франсиско Дж.
источник
0

Это для Bootstrap datetimepicker

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

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

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

.dialogModel{
    overflow-x: visible !important;
    overflow-y: visible !important;
}
Шубхам Кумар
источник