Wie Bootstrap-Datum und Zeitpicker in einem modalen Popup-Fenster verwenden?

Question

Ich versuche, die Datums- und Uhrzeitauswahl in einem modalen Popup-Fenster zu implementieren. Ich kann die Datumsauswahl zwar anzeigen, aber die Zeitauswahl im modalen Fenster nicht anzeigen. Wenn ich auf das Eingabetextfeld der Zeitauswahl klicke, wird sie hinter dem modalen Fenster angezeigt.

Hier ist mein HTML-Code: -

HTML-Code:

<div id="modal" class="modal fade in" style="display: block; margin-top:100px;" data-backdrop="static" aria-hidden="false"> 
<div class="main padder"> 
<table> 
<tr> 
    <td>    
    <input type="text" id="multiStartDate" name="multiStartDate" class="datepicker form-control" />        
    </td> 
<td> 
<input type="text" id="multiStartTime" name="multiStartTime" class="form-control timepicker"/> 
</td> 
<td> 
<input type="text" id="multiEndDate" name="multiEndDate" class="form-control timepicker" /> 
</td> 
<td> 
<a href="#" class="btn btn-md btn-orange btn-info m-r-small" id="addNewDate">Add</a> 
</td> 
</tr> 
</table> 
</div> 
</div> 

Hier ist die CSS-Code:

.datepicker { 
     z-index: 100000 !important; 
     display: block; 
    } 

    .timepicker{ 
     z-index: 100001 !important; 
    } 

Hier ist der Js-Code:

Ich bin mit dem Backbone.js Rahmen arbeiten:

Also in meinem Backbone.js sehen:

onShow : function(){ 

     $('#multiStartDate').datepicker({ 
     format: "mm-dd-yyyy", 
     autoclose: true, 
     todayHighlight:true 
     }); 

     $('#modal').modal('show'); 
     $('#multiStartTime').timepicker(); 
     }, 

Answer 1

CSS für Ihre Datetime hinzufügen, es rendert aber hinter Ihrem modal ist, so dass Sie den Z-Index des Datetime innerhalb der modalen offenen Veranstaltung wie

erhöhen müssen

Answer 2

Hallo, ich bin heute über diese Frage zurück gekommen und als ich auf deine Geige geschaut habe, war das erste, was ich bemerkte, dass du nicht mal den Datepicker js oder timepicker js im Lieferumfang hattest! Sie sind nicht im Bootstrap enthalten! Sie müssen tatsächlich BEIDE css und js für jedes! So

Ich habe es trotzdem arbeiten - ich eigentlich nicht bekommen die Zeitpfeile gehen, aber Sie sollten ernsthaft an den Entwicklungs Seiten auf Github aussehen, sowohl

Dies ist der Link für die timepicker Seite - Check es

https://jsfiddle.net/RachGal/x3ek9mjx/

Hoffnung aus, das hilft

Rach