0

tatsächliches ProblemDatetime Widget seltsam Platzierung

ich den Code-Snippet für eine bessere Fehlerbehebung enthalten habe, aber selbst hätte ein Problem, aber bitte unten auf das Bild beziehen, stellen Sie fest, dass die Datetimepicker-Widget hinter dem Tisch liegt. Wie man es vor allem schafft?

enter image description here

Code-Snippet

Die Datetime komisch wirkt.

Siehe das Code-Snippet, ich habe einen Fehler, der es nicht die richtige Fehlermeldung bietet. Ich habe alle richtigen cdn enthalten.

Zusätzlich kann das datetimepicker Widget erscheinen, aber es wurde am unteren Rand der Ergebnisbox platziert.

$('.datetimepicker').datetimepicker({ 
 
    format : "DD-MM-YYYY hh:mm" 
 
    });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<label for="datefrom">Date From</label> 
 
<input id="datefrom" name="datefrom" type="text" class="datetimepicker"/> 
 
       
 
<table id="myTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%"> 
 
    <thead> 
 
     <tr> 
 
     <th>Date</th> 
 
     <th>Description</th> 
 
     <th>Receipt No/Ref No</th> 
 
     <th>Payment Method</th> 
 
     <th>Amount</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>01-10-2017</td> 
 
     <td>DOB Balance</td> 
 
     <td>N/A</td> 
 
     <td>Cash</td> 
 
     <td>$1000</td> 
 
    </tr> 
 
    <tr> 
 
     <td>01-10-2017</td> 
 
     <td>DOB Balance</td> 
 
     <td>N/A</td> 
 
     <td>Cash</td> 
 
     <td>$1000</td> 
 
    </tr> 
 
    <tr> 
 
     <td>01-10-2017</td> 
 
     <td>DOB Balance</td> 
 
     <td>N/A</td> 
 
     <td>Cheque</td> 
 
     <td>$1000</td> 
 
    </tr> 
 
    <tr> 
 
     <td>01-10-2017</td> 
 
     <td>DOB Balance</td> 
 
     <td>N/A</td> 
 
     <td>TT</td> 
 
     <td>$1000</td> 
 
    </tr> 
 
    </tbody> 
 
    </table>

+0

versuchen Sie, einen höheren Z-Index zum Kalendercontainer hinzuzufügen – AZinkey

Antwort

-1

bereits. Wenn das hilft, die Antwort zu akzeptieren.

$('.datetimepicker').datetimepicker({ 
 
    format : "DD-MM-YYYY hh:mm" 
 
    });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div style="position: relative"> 
 
    <label for="datefrom">Date From</label> 
 
    <input id="datefrom" name="datefrom" type="text" class="datetimepicker"/> 
 
</div> 
 

 
       
 
<table id="myTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%"> 
 
    <thead> 
 
     <tr> 
 
     <th>Date</th> 
 
     <th>Description</th> 
 
     <th>Receipt No/Ref No</th> 
 
     <th>Payment Method</th> 
 
     <th>Amount</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>01-10-2017</td> 
 
     <td>DOB Balance</td> 
 
     <td>N/A</td> 
 
     <td>Cash</td> 
 
     <td>$1000</td> 
 
    </tr> 
 
    <tr> 
 
     <td>01-10-2017</td> 
 
     <td>DOB Balance</td> 
 
     <td>N/A</td> 
 
     <td>Cash</td> 
 
     <td>$1000</td> 
 
    </tr> 
 
    <tr> 
 
     <td>01-10-2017</td> 
 
     <td>DOB Balance</td> 
 
     <td>N/A</td> 
 
     <td>Cheque</td> 
 
     <td>$1000</td> 
 
    </tr> 
 
    <tr> 
 
     <td>01-10-2017</td> 
 
     <td>DOB Balance</td> 
 
     <td>N/A</td> 
 
     <td>TT</td> 
 
     <td>$1000</td> 
 
    </tr> 
 
    </tbody> 
 
    </table>

1

Sie Bootstrap Datumsauswahl verwendet haben. Also, Sie müssen ihren Regeln folgen. Bitte überprüfen Sie ihre Dokumentation Faust http://eonasdan.github.io/bootstrap-datetimepicker/

Bootstrap datetimepicker Komponente sollte in einem relativ positionierten Container platziert werden.