jquery-ui datepicker zmiana z-index

Question

Problem jest dość prosty, chociaż mam problem z ustaleniem, jak go rozwiązać.

Używam datepicker jQuery-ui wraz z niestandardowym "włączeniem/wyłączeniem stylu ios". Ten przełącznik używa niektórych pozycjonowanych absolutnie elementów, które są obecnie wyświetlane na górze mojego selektora daty.

zobaczyć brzydki krąg obejmujący 06 lipca poniżej ...

brudny sposób to zrobić (przynajmniej IMO) jest napisanie styl w jednym z moich arkuszy stylów, ale ja bardzo często używaj trochę javascriptu, gdy uruchamiasz próbkę, aby to zrobić.

Ja 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 wydaje się, że z-index nadpisane przy każdym datepicker jest uruchomiona.

każda pomoc jest doceniana!

Answer 1

Twój kod JS w pytaniu nie działa, ponieważ jQuery resetuje atrybut style widgetu datepicker za każdym razem, gdy go wywołujesz.

Łatwym sposobem przesłonić jego style „s z-index jest z reguły !important CSS jak już wspomniano w another answer. Jeszcze jeden answer sugeruje ustawienie position: relative; i z-index na samym elemencie wejściowym, który zostanie automatycznie skopiowany do widżetu Datepicker.

Ale, zgodnie z wnioskiem, jeśli z jakiegoś powodu naprawdę trzeba ustawić go dynamicznie, dodając więcej niepotrzebnego kodu i przetwarzania na swojej stronie, 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); 
    } 
}); 

Fiddle

I utworzył obiekt odroczonej funkcji, aby ustawić widget z-index po zresetowaniu go 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 dla poprawek jQuery UI (to tuż nad poprawkami IE6 na moich stronach).

Answer 2

Istnieje bardziej elegancki sposób na zrobienie tego. Dodaj CSS:

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

jQuery ustawi z-index do 101 (o jeden więcej niż w analogicznym elementu) kalendarza. Pole position musi być absolute, relative lub fixed. jQuery szuka rodziców pierwszy element, który jest bezwzględna/względna/stały i trwa jego z-index

Answer 3

datepicker teraz ustawia podręczne z-index na jeden więcej niż związanego swojej dziedzinie, aby utrzymać go przed to pole, nawet jeśli to pole samo znajduje się w wyskakującym oknie dialogowym. Domyślnie indeks Z wynosi 0, więc datepicker kończy się na 1.Czy jest przypadek, w którym nie wyświetla się poprawnie datepicker? JQuery Forum Post

Aby dostać z-index 100. Trzeba wejście z z-index:99; i jQueryUI zaktualizuje datepicker być z-index:100

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

Można również określić z-index do dziedziczenia, który powinien dziedziczyć z twojego 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; }

Answer 4

Trzeba użyć !important klauzuli zmusić z-index wartość-line za pomocą CSS.

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

Answer 5

Ten pracował dla mnie, gdy starałem się używać datepicker w połączeniu z bootstrap modalnym:

$('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ń wybierak, aby dopasować swoje własne potrzeby. Ustawiłem "z-index" na 1051, ponieważ indeks Z dla modala ładowania początkowego został ustawiony na 1050.

Answer 6

NAJLEPSZY NATURALNY sposób polega na umieszczeniu elementu wyboru daty na "platformie", która ma " względna "pozycja i ma wyższy" indeks z "niż element, który jest wyświetlany ponad twoją kontrolą ...