Как изменить значение Z-индекса jQuery UI Datepicker?

Я вынужден использовать более старую версию jQuery ui, которая составляет 1.8.10. Datepicker в этой версии имел ошибку внутри настройки Z-индекса, которая иногда заставляла его появляться под другими элементами управления. Я просто хочу настроить z-индекс dp так, чтобы он появлялся поверх других элементов управления. Я попытался изменить Z-индекс .файл JS, но это не удалось. Я читал, что вы должны установить это значение в событии aftershow, потому что значение будет перезаписано, если его ранее(не уверен, если это правда). Вот пример того, как im создает экземпляр dp...я также прилагается элемента управления datepicker, чтобы в datepicker.

        $(function () {
        $("input[id$='txtPreviousCutOff']").datetimepicker({
            timeFormat: "hh:mm tt",
            stepMinute: 5
        });
        $("#dpimage6").click(function () {
            $("input[id$='txtPreviousCutOff']").datepicker("show")
        });
    });
8
css jquery jquery-ui jquery-ui-datepicker jquery-ui-timepicker

7 ответов

.ui-datepicker-div { z-index: 999999; }

или с js:

$(function () {
    $("input[id$='txtPreviousCutOff']").datetimepicker({
        timeFormat: "hh:mm tt",
        stepMinute: 5
     });
     $("#dpimage6").click(function () {
        $("input[id$='txtPreviousCutOff']").datepicker("show")
    });
    $('.ui-datepicker-div').css('zIndex', 999999);
});
6

вам нужно будет применить стили к ui-widget-content класс

.ui-widget-content
{
    z-index: 100; 
}

убедитесь, что класс добавлен с лучше специфичности так что это переопределяет UI styles

#datepicker.ui-widget-content {}
5

этот код работает для меня. Предположим, у меня есть дата-комплектовщик див название "Уи-элемент управления datepicker-div В" и класса "применить" "уй-отмечать". Поэтому я даю css as, его работу для меня.

#ui-datepicker-div ,.ui-datepicker { z-index: 99999 !important; }
4

похоже, datepicker копирует любое значение z-индекса, которое имеет исходный элемент ввода. Я могу придумать 2 способа решить эту проблему:

Не-JS Просто добавьте z-index:1051; к атрибуту style вашего входного элемента. Это основано на наблюдении, что Bootstrap .modal класс использует Z-индекс 1050.

динамическое решение с использованием JS При объявлении вашего datepicker добавьте обработчик beforeShow, который извлекает z-индекс .modal и установить datepicker Z-индекс на 1 выше этого:

datepicker({beforeShow: function(inputElem, inst) {
          var zi = Number($(inputElem).closest('.modal').css('z-index'));
          $(inputElem).css('z-index',zi+1);
          }});
2

используйте это, чтобы установить свой datepicker z-index: (не тестируется, но должен работать)

$("input[id$='txtPreviousCutOff']").datetimepicker({
            timeFormat: "hh:mm tt",
            stepMinute: 5,
            beforeShow: function() {$('#ui-datepicker-div').css('z-index',++$.ui.dialog.maxZ); }
        });
1

просто измените CSS:

как и до этого:

/* Original */
.ui-datepicker { width: 17em; padding: .2em .2em 0 }
/* Modify */
.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index:9999 !important; }

не забудьте добавить !Important.

это переопределяет любой встроенный стиль, который добавляется javascript.

надеюсь, это сработает:)

Удачи В Кодировании

0

Я вызвал эту функцию, когда пользователь щелкает в текстовом поле, используемом для управления datepicker

function textboxWhenClicked(){
  $("#textboxid").datepicker();
  $("#ui-datepicker-div").css("z-index", 999999);
}

работал великий

- M

0