Erreur: Bootstrap datetimepicker n'est pas une fonction

Question

Je suis très nouveau pour le html et le bootstraping. J'essaie d'utiliser la fonction datetimepicker.

Je sais que cette question a été posée plusieurs fois et j'ai essayé plusieurs réponses différentes sur les questions similaires et encore il jette la même erreur que datetimepicker n'est pas une fonction. J'apprécie que vous sachiez ce que je fais de mal. À la suite de mon code:

 <div class="col-lg-4"> 
     <div class="form-group"> 
     <label for="datetimepicker1">Date:</label> 
      <div class ='input-group date' id='datetimepicker1'> 
      <input type="text" class="form-control"> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
      </div> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
     <script type="text/javascript"> 
      $(function() { 
      $('#datetimepicker1').datetimepicker(); 
      }); 
     </script> 
     </div> 
    </div> 

Answer 1

Ordre du fichier js doit en

1. jQuery et Moment.js
2. Bootstrap.js
3. Bootstrap datepicker.js

Essayez de utilisez le code suivant:

<div class="col-lg-4"> 
     <div class="form-group"> 
     <label for="datetimepicker1">Date:</label> 
      <div class ='input-group date' id='datetimepicker'> 
      <input type="text" class="form-control"> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
      </div> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css"> 
     <script type="text/javascript"> 
      $(function() { 
      $('#datetimepicker').datetimepicker(); 
      }); 
     </script> 
     </div> 
    </div> 

Answer 2

datetimepicker() a besoin d'être initizialized sur un élément input à l'intérieur d'un div avec la règle de style position:relative.

JS Fiddle

<form class="form-inline"> 
    <div class="form-group"> 
    <label for="dtp">Date: </label> 
    <div style="position:relative"> 
     <input type="text" class="form-control" id="dtp"> 
     <script> 
     $(function() { 
      $('#dtp').datetimepicker(); 
     }); 
     </script> 
    </div> 
    </div> 
</form>