Проблема довольно проста, хотя мне трудно понять, как ее решить.
Я использую 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.
любая помощь приветствуется!
javascript
jquery
css
jquery-ui
datepicker
Грег Гуида
источник
источник
style
тег в заголовок - не только его наличие в CSS делает ваш JS-код короче и чище, но и беспрепятственно применяется ко всем экземплярам datepickers.style
Тег в голове немного ближе к тому , что им ищет , но то , что я действительно хочу сделать , это изменить атрибут стиля на элементе дата-подборщика.=]
Ответы:
Ваш JS-код в вопросе не работает, потому что jQuery сбрасывает
style
атрибут виджета datepicker каждый раз, когда вы его вызываете.Самый простой способ , чтобы переопределить его
style
«Sz-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 на моих страницах).
источник
;)
z-index
на вход DOM. Это единственное, что сработало для меня:<input .... style="z-index: 9999;"/>
Есть более элегантный способ сделать это. Добавьте этот 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-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», чем элемент, который отображается над вашим контролем ...
источник
BEST NATURAL way
В моем случае ничего не получилось. Мне нужно было добавить 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; }
источник