Jquery Date Picker Z-Index Problem

Ich habe ein Diashow-Div und ein Datepicker-Feld über diesem Div.

Wenn ich in das Datumsauswahlfeld klicke, wird das Datumsauswahlfeld hinter der Diashow div angezeigt.

Und ich habe das Skript wie folgt geschrieben:

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

Daher kann ich den Z-Index von Datepicker in CSS nicht ändern. Der Z-Index der Datumsauswahl, die das Skript generiert, ist 1 und mein Diashow-Div (der auch über googleajaxapi aufgerufen wird) ist 5. Ich denke, ich muss den Z-Index der Datumsauswahl um mehr als 5 erhöhen eine Möglichkeit, es zu erhöhen?

Kann mir jemand helfen?

Fügen Sie den folgenden Stil in das Textelement "Eingabe" ein : position: relative; z-index: 100000;.

Der Datepicker div übernimmt den Z-Index von der Eingabe, dies funktioniert jedoch nur, wenn die Position relativ ist.

Auf diese Weise müssen Sie kein Javascript über die jQuery-Benutzeroberfläche ändern.

einfach in Ihrem CSS verwenden ' .ui-datepicker{ z-index: 9999 !important;}' Hier kann 9999 durch einen beliebigen Ebenenwert ersetzt werden, den Ihr Datepicker zur Verfügung haben soll. Weder darf Code kommentiert noch ' position:relative;' CSS zu Eingabeelementen hinzugefügt werden. Da sich das Erhöhen des Z-Index der Eingabeelemente auf alle Schaltflächen des Eingabetyps auswirkt, ist dies in einigen Fällen möglicherweise nicht erforderlich.

arbeitete für mich

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

Basierend auf der Marksyzm-Antwort hat dies für mich funktioniert:

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

Wenn Sie sich Sorgen über unordentliches Markup machen oder diesen Wert nicht in CSS fest codieren möchten, können Sie die Eingabe festlegen, bevor sie angezeigt wird. Etwas wie das:

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

Beachten Sie, dass Sie die "position": "relative"Regel nicht auslassen können , da das Plugin entweder im Inline-Stil für beide Regeln oder für das Stylesheet sucht, aber nicht für beide .

Das dialog("widget")ist der eigentliche picker, das erscheint.

Ich habe ein Dialogfeld, in dem der Datepicker verwendet wird. Es war immer versteckt. Wenn ich den Z-Index angepasst habe, wurde das Feld in der unteren Form immer im Dialogfeld angezeigt.

Ich habe eine Kombination von Lösungen verwendet, die ich gesehen habe, um das Problem zu beheben.

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

Die Vorher-Show stellt sicher, dass der Datepicker bei Auswahl immer oben ist, aber der onClose stellt sicher, dass der Z-Index des Felds zurückgesetzt wird, damit er sich nicht mit Dialogen überschneidet, die später mit einem anderen Datepicker geöffnet werden.

Ich hatte dieses Problem, das ich mit einem Klick gelöst habe:

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

Siehe hier: http://forum.jquery.com/topic/z-index-1-datepicker-1-8

Ich habe eine Seite, auf der sich der Datepicker über einer Tabletools-Schaltfläche von datatables.net befand. Die Datatables-Schaltflächen hatten einen höheren Z-Index als die einzelnen Datumsauswahl-Datumsschaltflächen. Dank Ronyes Antwort konnte ich dieses Problem mithilfe der folgenden Position lösen: relative; und Z-Index: 10000. Danke!

Dies passierte mir, als mir das Thema fehlte. Stellen Sie sicher, dass das Thema vorhanden ist, oder laden Sie das Thema erneut herunter, und laden Sie es erneut auf Ihren Server hoch.

Das hat mein Problem gelöst:

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

Tatsächlich können Sie Ihr CSS effektiv hinzufügen, .ui-datepicker{ z-index: 9999 !important;}aber Sie können es am Ende der UI-Datepicker-Klasse ändern jquery-ui.cssoder jquery-ui.min.csshinzufügen z-index: 9999 !important;. beides funktioniert bei mir (du brauchst nur eins ;-))

Ich hatte auch dieses Problem, da der Datepicker den Z-Index der Eingabe verwendet, habe ich das folgende CSS hinzugefügt

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

Nehmen Sie einfach die Regel, die für Ihre gilt, entweder nach übergeordneter ID, Klasse oder in meinem Fall nach einem Bootstrap-Dialogfeld, und verwenden Sie deren Eingabegruppe und Formularsteuerung.

Ich musste

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