Bootstrap Datetimepicker ne s'affiche pas correctement

Question

J'ai besoin d'afficher le bootstrap datetimepicker pour un champ de saisie. Cela fonctionne mais ne s'affiche pas correctement. Le calendrier est affiché mais je ne vois pas l'option pour changer l'heure.

code HTML:

<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> 

code JavaScript:

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

Liste des dépendances J'ai utilisé:

<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> 

Voici le violon: JSfiddle

Voici les photos du calendrier déroulant:

Answer 1

Dans la section Installing des docs, les composants nécessite:

1. jQuery
2. Moment.js
3. Bootstrap. js (la transition et l'effondrement sont requis si vous n'utilisez pas le Bootstrap complet)
4. scénario Bootstrap Datepicker
5. Bootstrap CSS
6. Bootstrap Datepicker CSS

Il vous manque jQuery, momentjs et bootstrap.js dans votre violon.

---

S'il vous plaît noter que:

• Vous devez utiliser l'option format pour dire le sélecteur dans le format de la date doit être formatée. Vous pouvez utiliser 'YYYY-MM-DD HH:mm'.

• Vous aurez l'erreur suivante dans la console:

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

  si vous ne changez pas votre structure HTML, voir docs quelques exemples. Vous devez utiliser data-date-* si vous souhaitez initialiser les options du sélecteur via les attributs de données. Vous pouvez utiliser data-date-max-date pour définir l'option maxDate. Voir here pour d'autres exemples.

---

Voici un échantillon de travail:

$('#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>