Проблема с z-индексом выбора даты jQuery

У меня есть div для слайд-шоу, и у меня есть поле datepicker над этим div.

Когда я нажимаю на поле выбора даты, панель выбора даты отображается за div слайд-шоу.

И я поместил сценарий как:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js

Поэтому я не могу изменить z-индекс datepicker в CSS. Z-индекс datepicker, который генерирует скрипт, равен 1, а z-index моего слайд-шоу (также вызывающего через googleajaxapi) равен 5. Итак, я думаю, мне нужно увеличить z-index средства выбора даты больше, чем 5. Так что, есть любой способ увеличить его?

Кто-нибудь может мне помочь?

Поместите следующий стиль в текстовом элементе «ввода»: position: relative; z-index: 100000;.

Div datepicker принимает z-index из входных данных, но это работает только в том случае, если позиция является относительной.

Используя этот способ, вам не нужно изменять какой-либо javascript из jQuery UI.

просто в вашем css use ' .ui-datepicker{ z-index: 9999 !important;}' Здесь 9999 можно заменить на любое значение слоя, которое вы хотите, чтобы ваш datepicker был доступен. Ни код, ни добавление position:relative;CSS к элементам ввода нельзя . Поскольку увеличение z-индекса элементов ввода повлияет на все кнопки типа ввода, что в некоторых случаях может не понадобиться.

работал на меня

.hasDatepicker {
    position: relative;
    z-index: 9999;
}

Основываясь на ответе marksyzm, это сработало для меня:

$('input').datepicker({
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
            "z-index": 999999
        });
    }
});

Добавляя к ответу Джастина, если вы беспокоитесь о неопрятной разметке или не хотите, чтобы это значение было жестко закодировано в CSS, вы можете установить ввод до его отображения. Что-то вроде этого:

$('input').datepicker({
    beforeShow:function(input){
        $(input).dialog("widget").css({
            "position": "relative",
            "z-index": 20
        });
    }
});

Обратите внимание, что вы не можете пропустить "position": "relative"правило, поскольку плагин либо смотрит во встроенном стиле для обоих правил, либо для таблицы стилей, но не для обоих .

dialog("widget")Является фактическим DatePicker , что всплывает.

У меня была эта проблема, которую я решил с помощью щелчка:

var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
        $('.datepicker').css("z-index", "999999999");
}).data('datepicker');

У меня есть диалоговое окно, в котором используется датапикер. Это всегда было скрыто. Когда я настраивал z-index, поле в нижней форме всегда появлялось в диалоговом окне.

Я использовал комбинацию решений, которые видел, чтобы решить проблему.

$('.ui-datepicker', $form).datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: "yy-M-dd",
                beforeShow: function (input) {
                    $(input).css({
                        "position": "relative",
                        "z-index": 999999
                    });
                },
                onClose: function () { $('.ui-datepicker').css({ 'z-index': 0  } ); }                    
            });

Перед показом гарантирует, что datepicker всегда будет наверху, когда выбран, но onClose гарантирует, что z-index поля будет сброшен, чтобы он не перекрывался ни с какими диалогами, открытыми позже с другим datepicker.

Смотрите здесь: http://forum.jquery.com/topic/z-index-1-datepicker-1-8

У меня есть страница, на которой указатель даты находился над кнопкой datatables.net tabletools. Кнопки таблиц данных имели более высокий z-индекс, чем отдельные кнопки даты выбора даты. Благодаря ответу Ронье я смог решить эту проблему, используя position: relative; и z-index: 10000. Спасибо!

Это случилось со мной, когда мне не хватало темы. Убедитесь, что тема существует, или, возможно, перезагрузите тему и повторно загрузите ее на свой сервер.

Вот что решило мою проблему:

 $( document ).ready(function() {   
    $('#datepickerid').datepicker({
     zIndexOffset: 1040 #or any number you want
     });
});

Фактически, вы можете эффективно добавить в свой CSS, .ui-datepicker{ z-index: 9999 !important;}но вы можете изменить jquery-ui.cssили jquery-ui.min.cssи добавить в конце класса ui-datepicker z-index: 9999 !important;. у меня работают обе вещи (вам нужен только один ;-))

У меня тоже была эта проблема, так как datepicker использует входной z-index, я добавил следующий css

#dialogID input,.modal-dialog input, .modal-dialog .input-group .form-control{
  z-index:inherit;
}

Просто возьмите правило, которое применяется к вашему, либо по родительскому идентификатору, классу или, в моем случае, диалогу начальной загрузки, используя их группу ввода и контроль формы.

Мне пришлось

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}