Problem z indeksem z selektora dat w jquery

Mam element div pokazu slajdów i pole wyboru daty powyżej tego elementu div.

Po kliknięciu pola wyboru daty panel wyboru daty jest wyświetlany za elementem div pokazu slajdów.

I umieściłem scenariusz jako:

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

Nie mogę więc zmienić indeksu Z w datepicker w CSS. Indeks z dla datepicker, który generuje skrypt to 1, a mój div pokazu slajdów (również wywołujący go przez googleajaxapi) z-index to 5. Więc myślę, że muszę zwiększyć indeks z selektora dat o więcej niż 5. Więc jest jakikolwiek sposób, aby to zwiększyć?

Ktoś może mi pomóc?

Umieść następujący styl w „wejściowego” elementu tekstowego: position: relative; z-index: 100000;.

Element div datepicker pobiera indeks z z danych wejściowych, ale działa to tylko wtedy, gdy pozycja jest względna.

W ten sposób nie musisz modyfikować żadnego javascript w interfejsie użytkownika jQuery.

po prostu w swoim css użyj ' .ui-datepicker{ z-index: 9999 !important;}' Tutaj 9999 można zamienić na dowolną wartość warstwy, którą chcesz, aby datapicker był dostępny. Żaden kod nie może być komentowany ani dodawany ' position:relative;' css do elementów wejściowych. Ponieważ zwiększenie indeksu z elementów wejściowych będzie miało wpływ na wszystkie przyciski typu wejściowego, co może nie być potrzebne w niektórych przypadkach.

pracował dla mnie

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

Opierając się na odpowiedzi marksyzm, to zadziałało dla mnie:

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

Dodając do odpowiedzi Justina, jeśli martwisz się niechlujnymi znacznikami lub nie chcesz, aby ta wartość była zakodowana na stałe w CSS, możesz ustawić dane wejściowe przed ich wyświetleniem. Coś takiego:

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

Zauważ, że nie możesz pominąć "position": "relative"reguły, ponieważ wtyczka wygląda w stylu wbudowanym dla obu reguł lub arkusza stylów, ale nie dla obu .

Jest dialog("widget")to faktyczny wyskakujący selektor daty.

Miałem ten problem, który rozwiązałem za pomocą kliknięcia:

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

Mam okno dialogowe, które używa na nim DatePicker. Zawsze był ukryty. Kiedy dostosowałem indeks Z, pole w dolnej formie zawsze pojawiało się w oknie dialogowym.

Użyłem kombinacji rozwiązań, które widziałem, aby rozwiązać problem.

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

Przed pokazem gwarantuje, że datepicker zawsze jest na górze po wybraniu, ale onClose zapewnia, że ​​indeks Z pola zostanie zresetowany, aby nie nakładał się na żadne okna dialogowe otwierane później z innym datepicker.

Zobacz tutaj: http://forum.jquery.com/topic/z-index-1-datepicker-1-8

Mam stronę, na której datapicker znajdował się nad przyciskiem tabletu datatables.net. Przyciski datatables miały wyższy indeks z niż poszczególne przyciski dat w selektorze daty. Dzięki odpowiedzi Ronye udało mi się rozwiązać ten problem, używając pozycji: względna; i z-index: 10000. Dzięki!

Zdarzyło mi się to, gdy brakowało mi tematu. Upewnij się, że motyw istnieje, lub może ponownie załaduj motyw i prześlij go ponownie na serwer.

To rozwiązało mój problem:

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

W rzeczywistości możesz skutecznie dodawać swoje css, .ui-datepicker{ z-index: 9999 !important;}ale możesz modyfikować jquery-ui.csslub jquery-ui.min.cssi dodawać na końcu klasy ui-datepicker z-index: 9999 !important;. obie rzeczy działają dla mnie (potrzebujesz tylko jednej ;-))

Miałem również ten problem, ponieważ datepicker używa indeksu z wejścia, dodałem następujący css

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

Po prostu weź regułę, która ma zastosowanie do twojej, albo przez identyfikator rodzica, klasę lub w moim przypadku okno dialogowe ładowania początkowego, używając ich grupy wejściowej i kontrolki formularza.

musiałem

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