Bootstrap Datetimepicker wird nicht korrekt angezeigt

Question

Ich muss den Bootstrap Datetimepicker für ein Eingabefeld anzeigen. Es funktioniert, aber nicht richtig angezeigt. Der Kalender wird angezeigt, aber ich kann die Option zum Ändern der Zeit nicht sehen.

HTML-Code:

<div class="form-group"> 
    <p>Date of Birth <span>*</span></p> 
    <input type="text" name="dob" id="dob" max="3000-12-31" value="2012-05-15 21:05" class="form-control input-sm" required/> 
</div> 

JavaScript-Code:

$(document).ready(function() { 
    $(function() { 
    $('#dob').datetimepicker(); 
    }); 
});` 

Liste der Abhängigkeiten ich verwendet habe:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> 

Hier ist die Geige: JSfiddle

Hier sind Bilder des Kalenders Dropdown:

Answer 1

Vom Installing Abschnitt der Dokumentation, die Komponenten erfordert:

1. jQuery
2. Moment.js
3. Bootstrap. js (Übergang und Kollaps sind erforderlich, wenn Sie nicht den vollständigen Bootstrap verwenden)
4. Bootstrap Datepicker-Skript
5. Bootstrap CSS
6. Bootstrap Datumsauswahl CSS

Sie vermissen jQuery, momentjs und bootstrap.js in Ihrer Geige.

---

Bitte beachten Sie, dass:

• Sie haben die format Option verwenden, um den Picker zu sagen, in welchem ​​Format das Datum formatiert werden soll. Sie können 'YYYY-MM-DD HH:mm' verwenden.

• Sie die folgenden Fehler in der Konsole haben:

  Uncaught Error: datetimepicker component should be placed within a non-static positioned container

  wenn Sie nicht über Ihre HTML-Struktur ändern docs für einige Beispiele sehen.

• Sie müssen data-date-* verwenden, wenn Sie Optionen des Pickers über Datenattribute initialisieren möchten. Sie können data-date-max-date verwenden, um maxDate Option festzulegen. Weitere Beispiele finden Sie unter here.

---

hier ein funktionstüchtiges Beispiel:

$('#dob').datetimepicker({ 
 
    format: 'YYYY-MM-DD HH:mm' 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class="col-lg-12"> 
 
    <p>Date of Birth <span>*</span></p> 
 
    <input type="text" name="dob" id="dob" data-date-max-date="3000-12-31" value="2012-05-15 21:05" class="form-control input-sm" required/> 
 
</div>