jquery-ui zmiana datepicker z-index

83

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 ...

wprowadź opis obrazu tutaj

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!

Greg Guida
źródło
3
Uważam, że ważna reguła css! W css twojej strony jest znacznie bardziej przejrzysta niż javascript, ponieważ z-index jest właściwością CSS i służy do stylizacji. Gdybym miał zrobić rozwiązanie JS, oznaczałoby to dodanie styletagu do głowy - nie tylko posiadanie go w CSS sprawia, że ​​kod JS jest krótszy i bardziej przejrzysty, ale także bezproblemowo stosuje się do wszystkich instancji datepickerów.
Fabrício Matté
1
Możliwy duplikat stackoverflow.com/questions/715677/ ...
Lance
@Lance nie jest dupkiem, ponieważ pytam, jak można to zrobić dynamicznie bez dodawania linii do css
Greg Guida
@ FabrícioMatté Myślę, że po prostu nie chcę zepsuć mojego css jakimś głupim zastąpieniem dla przypadku krawędzi jquery-ui. styleTag w głowie jest trochę bliżej do tego, co im szuka, ale to, co naprawdę chcesz zrobić, to zmienić atrybut stylu na elemencie data-picker.
Greg Guida,
Już zarezerwowałem miejsce na dole pliku CSS tylko dla hacków jQuery UI w każdym projekcie, który zaczynam, ale tak, przesłałem odpowiedź za pomocą czystego rozwiązania jQuery wyjaśniającego, dlaczego CSS byłby czystszym rozwiązaniem, teraz możesz wybrać, który z nich używać. =]
Fabrício Matté

Odpowiedzi:

143

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).

Fabrício Matté
źródło
5
Czy mogę ci po prostu powiedzieć, jak bardzo rządzisz !? Najpierw wypróbowałem mnóstwo innych rzeczy. Dziękuję Ci!
Bretticus
dziękuję za odpowiedź, działa, jednak jak tylko datepicker zostanie odświeżony (np. zmienisz miesiąc) z-index jest ustawiany na domyślny, więc myślę, że ta odpowiedź wymagałaby małej korekty, czyli dodania następującego onChangeMonthYear: function () {setTimeout (function () {$ ('. ui-datepicker'). css ('z-index', 99999999999999);}, 0); }
Gombo
@Gombo Uważam, że łatwiej jest użyć jednego z podejść CSS (opisanych powyżej metody JS), ponieważ są one znacznie mniej hakerskie. ;)
Fabrício Matté
Przynajmniej w FF maksymalna liczba ma 10 cyfr, więc dziewięć 9 może być lepszych (chociaż FF z przyjemnością przekonwertuje się na 2147483647 bez błędu).
Campbeln
+1 za wskazanie, aby ustawić z-indexwejście DOM. To była jedyna rzecz, która działała dla mnie:<input .... style="z-index: 9999;"/>
Sebastian
88

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

Marek Roj
źródło
2
To zdecydowanie najlepsze rozwiązanie. +1
Paul Chamberlain
Działał jak urok! Dziękuję
brando
Idealnie, ale w moim przypadku: .datepicker-dropdown {z-index: 999999!
Important
Prawie idealnie, ale nie działa, jeśli nie znasz maksymalnej wartości zindeksu, dla której chcesz, aby datapicker sam się narzucił.
MFAL
21

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

.ui-datepicker{z-index: 99 !important};
Emanuele Greco
źródło
Przepraszam nie działa dla mnie - indeks z jest ustawiany na elemencie przez jQuery, który ma wyższy priorytet niż! Ważne
Dylan Hamilton-Foster
1
@ DylanHamilton-Foster czy na pewno? Czy możesz dodać inny tag, np. BackgroundColor, aby sprawdzić, czy styl został faktycznie zastosowany?
Emanuele Greco
7

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.

David Hicks
źródło
5

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; }

Loren
źródło
1

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ą ...

Clinton
źródło
4
Dodaj zrozumiały kod i opisz więcej swojegoBEST NATURAL way
Peter
1

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">
Francisco G.
źródło
0

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;
}
shubham kumar
źródło