Jquery Date Picker Z-Index Problem

106

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?

Rubinist
quelle
Hier ist die Lösung stackoverflow.com/questions/11533161/…
Entwickler

Antworten:

176

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.

Ronye Vernaes
quelle
8
Das Problem dabei ist, dass Ihre Eingabe über anderen Elementen angezeigt wird. Dies ist selten der gewünschte Effekt
Serj Sagan
1
Soll das funktionieren, wenn der Datepicker an eine Spanne gebunden ist ?
rmoestl
10
position : relativeist nicht akzeptabel und funktioniert in meiner Situation nicht. Die unten stehende Lösung funktioniert einwandfrei.
Kiwy
1
Dies funktioniert nicht im IE 11-Browser. Ist dieser Browser spezifisch?
Ashwini Maddala
3
Diese Lösung funktioniert zwar, ist jedoch nicht für alle Situationen gültig. Am besten überschreiben Sie mit einer einzelnen Zeile CSS '.ui-datepicker {z-index: 9999! Important;}'
Daniel Tung
154

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.

Aakash Sahai
quelle
Ich musste datepickereher alsui-datepicker
M Smith
JavaScript verwendet immer noch diskontinuierliche Z-Indizes, beliebige Stapelkontexte und hat 2016 Probleme mit der browserübergreifenden Kompatibilität? ActionScript 3 FTW (vor einem Jahrzehnt und noch heute).
Triynko
16

arbeitete für mich

.hasDatepicker {
    position: relative;
    z-index: 9999;
}
Bashmakov Evgeniy
quelle
14

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

$('input').datepicker({
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
            "z-index": 999999
        });
    }
});
Lucas
quelle
1
Dies wirkt sich jedoch nur auf die Eingabe und nicht auf die Datumsauswahl aus?
Marksyzm
2
Ich verwende dieses Beispiel jqueryui.com/datepicker, für das kein Symbol für den Datepicker verwendet wird. Mit dieser Lösung hatte ich keine Probleme mit den restlichen Webkomponenten.
Lucas
5

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.

marksyzm
quelle
1
Dieses Problem sollte in den JqueryUI-Skripten behoben und so eingestellt werden, dass Überlagerungen standardmäßig vermieden werden. Die meisten Anwendungsfälle möchten niemals, dass Eingaben die Kalendereingabefunktionen überlagern. Wenn Eingaben (oder andere Elemente) den Kalender überlagern müssen, sollte eine solche Lösung verwendet werden. Trotzdem wäre @marksyzm die beste IMO-Lösung, da Sie sie nur bei Bedarf anwenden würden.
FrankO
5

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.

Harry Binnendyk
quelle
Diese Lösung ist großartig und hat mein Problem gelöst. Aber bearbeiten Sie es ein wenig auf "onClose" Teil. Ich setze $(this)statt $('.ui-datepicker'). Daher wird z-index:0anstelle aller Eingaben mit der Klasse ui-datepicker die Einstellung "this input" festgelegt.
Asuka165
4

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');
Waqleh
quelle
Diese Lösung funktioniert für mich perfekt im Popup-Fenster. Vielen Dank !
Darkomen
1

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!

TMNetworks
quelle
1

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.


quelle
1

Das hat mein Problem gelöst:

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

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

LeSage Stark
quelle
0

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.

Jaynesify
quelle
0

Ich musste

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