jquery-ui zmiana datepicker z-index

Problem jest dość prosty, chociaż nie wiem, jak go rozwiązać.

Używam datepicker jQuery-ui wraz z niestandardowym "przełącznikiem włączania / wyłączania stylu ios". Ten przełącznik używa niektórych absolutnie pozycjonowanych elementów, które obecnie pojawiają się na górze mojego selektora dat.

zobacz brzydki krąg obejmujący 6 lipca poniżej ...

brudnym sposobem na zrobienie tego (przynajmniej imo) jest napisanie stylu w jednym z moich arkuszy stylów, ale wolałbym raczej użyć javascript po uruchomieniu selektora, aby to zrobić.

Już próbowałem

$('.date_field').datepicker(); 
$('.date_field').datepicker("widget").css({"z-index":100});

i

$('.date_field').datepicker({
    beforeShow: function(input, inst) { 
        inst.dpDiv.css({"z-index":100});
    }
});

ale wygląda na to, że indeks Z jest nadpisywany za każdym razem, gdy uruchamiany jest datepicker.

każda pomoc jest mile widziana!

Twój kod JS w pytaniu nie działa, ponieważ jQuery resetuje styleatrybut widgetu Datepicker za każdym razem, gdy go wywołasz.

Łatwym sposobem przesłonić jego style„s z-indexjest z !importantreguły CSS, jak już wspomniano w innej odpowiedzi . Jeszcze inna odpowiedź sugeruje ustawienie position: relative;i z-indexsam element wejściowy, który zostanie automatycznie skopiowany do widżetu Datepicker.

Ale zgodnie z żądaniem, jeśli z jakiegokolwiek powodu naprawdę potrzebujesz ustawić go dynamicznie, dodając więcej niepotrzebnego kodu i przetwarzania do swojej strony, możesz spróbować tego:

$('.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);
    }
});

Skrzypce

Utworzyłem obiekt funkcji odroczonej, aby ustawić z-indexwidżet, po tym, jak zostanie zresetowany przez interfejs użytkownika jQuery, za każdym razem, gdy go wywołasz. Powinno wystarczyć na Twoje potrzeby.

Hack CSS jest znacznie mniej brzydki IMO, rezerwuję miejsce w moim CSS tylko na poprawki interfejsu jQuery (to tuż nad poprawkami IE6 na moich stronach).

Jest na to bardziej elegancki sposób. Dodaj ten CSS:

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

jQuery ustawi kalendarz na z-index101 (o jeden więcej niż odpowiedni element). positionPole musi być absolute, relativealbo fixed. jQuery wyszukuje element nadrzędny pierwszego elementu, który jest bezwzględny / względny / stały i przyjmuje jego 'z-index

Musisz użyć !importantklauzuli, aby wymusić wartość w linii z-indexza pomocą CSS.

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

To zadziałało, gdy próbowałem użyć DatePicker w połączeniu z modalem bootstrap:

$('input[id^="txtDate"]').datepicker();
$('input[id^="txtDate"]').on('focus', function (e) {
    e.preventDefault();
    $(this).datepicker('show');
    $(this).datepicker('widget').css('z-index', 1051);
});

Oczywiście zmień selektor, aby dopasować go do własnych potrzeb. Ustawiłem „indeks z” na 1051, ponieważ indeks z dla modalu ładowania początkowego został ustawiony na 1050.

Datepicker ustawia teraz wyskakujący indeks z o jeden więcej niż skojarzone z nim pole, aby zachować go przed tym polem, nawet jeśli to pole samo jest w wyskakującym oknie dialogowym. Domyślnie indeks z wynosi 0, więc datepicker kończy się na 1. Czy istnieje przypadek, w którym ten datepicker nie wyświetla poprawnie? Post na forum JQuery

Aby uzyskać indeks Z równy 100. Potrzebujesz danych wejściowych za pomocą, z-index:99;a JQueryUI zaktualizuje datepicker doz-index:100

<input style="z-index:99;"> lub <input class="high-z-index">i css .high-z-index { z-index: 99; }

Możesz również określić indeks z do dziedziczenia, który powinien dziedziczyć z okna dialogowego i spowodować, że jQueryUI poprawnie wykryje indeks z.

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

NAJLEPSZY NATURALNY sposób to po prostu umieszczenie elementu selektora dat na „platformie”, która ma „względną” pozycję i ma wyższy „indeks z” niż element, który jest widoczny nad Twoją kontrolą ...

W moim przypadku nic nie działało. Musiałem dodać indeks Z do typu danych wejściowych, który ma DatePicker.

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

Dotyczy to selektora danych Bootstrap

Jeśli datapicker jest ukryty, ponieważ w Twoim div pojawia się scroll, użyj:

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

w css całego div, które zawierają twój datepicker i inne elementy, takie jak

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