jquery-ui datepicker ändere den z-index

Das Problem ist ziemlich einfach, obwohl es mir schwer fällt, herauszufinden, wie ich es lösen kann.

Ich verwende einen jQuery-ui-Datepicker zusammen mit einem benutzerdefinierten "ios style on / off toggle". Dieser Schalter verwendet einige absolut positionierte Elemente, die derzeit über meiner Datumsauswahl angezeigt werden.

siehe den hässlichen Kreis am 6. Juli unten ...

Der schmutzige Weg, dies zu tun (zumindest imo), besteht darin, einen Stil in eines meiner Stylesheets zu schreiben, aber ich würde viel lieber Javascript verwenden, wenn der Picker gestartet wird, um dies zu erledigen.

Ich habe es schon versucht

$('.date_field').datepicker(); 
$('.date_field').datepicker("widget").css({"z-index":100});

und

$('.date_field').datepicker({
    beforeShow: function(input, inst) { 
        inst.dpDiv.css({"z-index":100});
    }
});

Es scheint jedoch, dass der Z-Index bei jedem Start des Datepickers überschrieben wird.

Jede Hilfe wird geschätzt!

Ihr JS-Code in der Frage funktioniert nicht, da jQuery das styleAttribut des Datepicker-Widgets bei jedem Aufruf zurücksetzt .

Eine einfache Möglichkeit, seine zu überschreiben style, z-indexist eine !importantCSS-Regel, wie bereits in einer anderen Antwort erwähnt . Eine weitere Antwort schlägt vor, das Eingabeelement selbst position: relative;und z-indexdas Eingabeelement selbst festzulegen, das automatisch in das Datepicker-Widget kopiert wird.

Wenn Sie es jedoch aus irgendeinem Grund wirklich dynamisch einstellen müssen, um Ihrer Seite mehr unnötigen Code hinzuzufügen und zu verarbeiten, können Sie wie gewünscht Folgendes versuchen:

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

Geige

Ich habe ein verzögertes Funktionsobjekt erstellt, um das z-indexWidget festzulegen, nachdem es bei jedem Aufruf von der jQuery-Benutzeroberfläche zurückgesetzt wurde. Es sollte Ihren Bedürfnissen genügen.

Der CSS-Hack ist IMO weit weniger hässlich. Ich reserviere einen Platz in meinem CSS nur für jQuery UI-Optimierungen (das ist direkt über den IE6-Optimierungen auf meinen Seiten).

Es gibt einen eleganteren Weg, dies zu tun. Fügen Sie dieses CSS hinzu:

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

jQuery setzt den Kalender z-indexauf 101 (eins mehr als das entsprechende Element). Das positionFeld muss sein absolute, relativeoder fixed. jQuery sucht nach dem übergeordneten Element des ersten Elements, das absolut / relativ / fest ist, und nimmt dessen 'z-index

Sie müssen die !importantKlausel verwenden, um den Inline- z-indexWert mithilfe von CSS zu erzwingen .

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

Dies funktionierte für mich, als ich versuchte, Datepicker in Verbindung mit einem Bootstrap-Modal zu verwenden:

$('input[id^="txtDate"]').datepicker();
$('input[id^="txtDate"]').on('focus', function (e) {
    e.preventDefault();
    $(this).datepicker('show');
    $(this).datepicker('widget').css('z-index', 1051);
});

Ändern Sie den Selektor natürlich entsprechend Ihren Anforderungen. Ich habe den "Z-Index" auf 1051 gesetzt, weil der Z-Index für das Bootstrap-Modal auf 1050 gesetzt wurde.

Der Datepicker setzt den Popup-Z-Index jetzt auf eins mehr als das zugehörige Feld, um ihn vor diesem Feld zu halten, selbst wenn sich dieses Feld selbst in einem Popup-Dialogfeld befindet. Standardmäßig ist der Z-Index 0, sodass der Datepicker mit 1 endet. Gibt es einen Fall, in dem der Datepicker nicht richtig angezeigt wird? JQuery Forum Post

Um einen Z-Index von 100 zu erhalten, benötigen Sie eine Eingabe mit z-index:99;und JQueryUI aktualisiert den Datepickerz-index:100

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

Sie können auch den zu erbenden Z-Index angeben, der von Ihrem Dialogfeld erben soll, und dazu führen, dass jQueryUI den Z-Index ordnungsgemäß erkennt.

<input style="z-index:inherit;"> oder <input class="inhert-z-index">und css .inherit-z-index { z-index: inherit; }

Der BESTE NATÜRLICHE Weg besteht darin, das Datumsauswahlelement einfach auf eine "Plattform" zu stellen, die eine "relative" Position und einen höheren "Z-Index" hat als das Element, das über Ihrer Kontrolle angezeigt wird ...

In meinem Fall hat nichts funktioniert. Ich musste den Z-Index zu dem Eingabetyp hinzufügen, der den Datepicker hat.

<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">

Dies ist für Bootstrap datetimepicker

Wenn sich Ihr Datepicker aufgrund eines Bildlaufs versteckt, wird in Ihrem div verwendet:

overflow-x: visible !important;
overflow-y: visible !important;

in css von ganzen div, die Ihren Datepicker und andere Elemente wie enthalten

.dialogModel{
    overflow-x: visible !important;
    overflow-y: visible !important;
}