Datepicker: Datepicker auf Modal (Z-Index)

Ich habe dieses Problem heute, wenn ich versuche, Datepicker auf Bootstrap Modal anzuzeigen.Datepicker: Datepicker auf Modal (Z-Index)

Ich verwende bootstrap-datepicker als Datepicker-Bibliothek.

Hier ist meine modale Form:

<div class="form-group"> 
    <label for="message-text" class="control-label">Start Date</label> 
      <div class="input-group date"> 
       <div class="input-group-addon"> 
        <i class="fa fa-calendar"></i> 
       </div> 
       <input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date"> 
      </div> 
</div>

Und hier ist meine Datepicker-Skript:

$('#datepicker2').datepicker({ 
     autoclose: true, 
     format: 'yyyy-mm-dd', 
     zIndexOffset: 10000 
    });

ich schon zIndexOffset verwenden, aber es funktioniert nicht, der Kalender noch hinter dem modalen gezeigt.

Kann jemand die Lösung vorschlagen?

Vielen Dank.

Quelle

2016-06-19 Code On

Haben Sie versucht, die Option 'container' Verwendung innerhalb des modalen der Datumsauswahl hinzufügen? – visola

@visola noch nicht, wo ist die Containeroption sollte ich setzen? –

Dies ist die Option: https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#container – visola

Sie sollten innerhalb des modalen div Hinzufügen der Datumsauswahl Container versuchen sein. Sie könnten der modal ein id wie folgt geben:

<div class="form-group" id="myModalWithDatePicker"> 
    <label for="start_date" class="control-label">Start Date</label> 
    <div class="input-group date"> 
    <div class="input-group-addon"> 
     <i class="fa fa-calendar"></i> 
    </div> 
    <input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date"> 
    </div> 
</div>

Dann können Sie die container Option wie folgt verwendet werden:

$('#datepicker2').datepicker({ 
    autoclose: true, 
    container: '#myModalWithDatePicker', 
    format: 'yyyy-mm-dd' 
});

Quelle

2016-06-19 11:16:50 visola

ich in Container, aber es ist immer noch nicht arbeiten –

@CodeOn Können Sie das DOM überprüfen, um sicherzustellen, dass das Element an der richtigen Stelle platziert wird? Ich sehe keinen anderen Grund, warum der Datumswähler nicht im Modal angezeigt würde. Ich denke, wir brauchen mehr Details. Wenn Sie ein JFiddle erstellen könnten, das dieses Problem reproduziert, würde viel helfen. – visola

hier ist meine Geige https://jsfiddle.net/88q5eacb/ so leid das Modal nicht kam, aber es funktioniert in meinem Server. –

Ich weiß nicht, ob es das Problem verursachen würde, aber Sie sind RahmenDas Label als für eine andere ID an den Eingang

<label for="message-text" class="control-label">Start Date</label>

Das Label for = „“ Attribut sollte auf die ID eingestellt werden das Eingangselement ist es im Zusammenhang mit - so sollte es

<label for="datepicker2" class="control-label">Start Date</label>

Quelle

2016-06-19 10:47:23 gavgrif

ich diese Option zu beheben.

.modal-open .ui-datepicker{z-index: 2000!important}

diese Option angewendet wurde, wenn modal geöffnet (Klasse modal-offen Körper hinzugefügt)

Quelle

2018-02-22 05:13:33

Datepicker: Datepicker auf Modal (Z-Index)

Antwort

Verwandte Themen