Bootstrap datetimepicker is not a function

Question

I am trying to use the datetimepicker from http   eonasdan github io bootstrap-datetimepicker  and I am getting the error  Uncaught TypeError         datetimepicker is not a function   Here are my includes    lt script src  https   ajax googleapis com ajax libs jquery 1 11 3 jquery min js  gt  lt  script gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs moment js 2 10 6 moment min js  gt  lt  script gt                          lt script src  https   cdnjs cloudflare com ajax libs bootstrap-datetimepicker 4 17 37 js bootstrap-datetimepicker min js  gt  lt  script gt   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs bootstrap-datetimepicker 4 17 37 css bootstrap-datetimepicker min css    gt    Here is the code    lt div class  container  gt       lt div class  col-md-5  gt           lt div class  form-group  gt               lt div class  input-group date  id  datetimepicker6  gt                   lt input type  text  class  form-control    gt                   lt span class  input-group-addon  gt                       lt span class  glyphicon glyphicon-calendar  gt  lt  span gt                   lt  span gt               lt  div gt           lt  div gt       lt  div gt       lt div class  col-md-5  gt           lt div class  form-group  gt               lt div class  input-group date  id  datetimepicker7  gt                   lt input type  text  class  form-control    gt                   lt span class  input-group-addon  gt                       lt span class  glyphicon glyphicon-calendar  gt  lt  span gt                   lt  span gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt   lt script type  text javascript  gt    document  ready function               function                      datetimepicker6   datetimepicker                    datetimepicker7   datetimepicker                   useCurrent  false   Important  See issue  1075                                 datetimepicker6   on  dp change   function  e                        datetimepicker7   data  DateTimePicker   minDate e date                                   datetimepicker7   on  dp change   function  e                        datetimepicker6   data  DateTimePicker   maxDate e date                                        lt  script gt    Any help would be greatly appreciated

User · Answer

The problem is that you have not included bootstrap.min.css. Also, the sequence of imports could be causing issue. Please try rearranging your resources as following:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>                       
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

DEMO

User · Answer

Below is the right code  Include JS files in following manner    x000D   x000D    document  ready function     x000D      function     x000D          datetimepicker6   datetimepicker    x000D          datetimepicker7   datetimepicker   x000D        useCurrent  false   Important  See issue  1075 x000D          x000D          datetimepicker6   on  dp change   function e    x000D            datetimepicker7   data  DateTimePicker   minDate e date   x000D          x000D          datetimepicker7   on  dp change   function e    x000D            datetimepicker6   data  DateTimePicker   maxDate e date   x000D          x000D        x000D      x000D   lt html gt  x000D   x000D   lt  -- Latest compiled and minified CSS -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  gt  x000D   x000D   lt  -- Optional theme -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap-theme min css  gt  x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs bootstrap-datetimepicker 4 17 37 css bootstrap-datetimepicker min css    gt  x000D   x000D   lt script src  https   cdnjs cloudflare com ajax libs moment js 2 10 6 moment min js  gt  lt  script gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 3 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt script src  https   cdnjs cloudflare com ajax libs bootstrap-datetimepicker 4 17 37 js bootstrap-datetimepicker min js  gt  lt  script gt  x000D   x000D   lt body gt  x000D   x000D   x000D   x000D     lt div class  container  gt  x000D       lt div class  col-md-5  gt  x000D         lt div class  form-group  gt  x000D           lt div class  input-group date  id  datetimepicker6  gt  x000D             lt input type  text  class  form-control    gt  x000D             lt span class  input-group-addon  gt  x000D                           lt span class  glyphicon glyphicon-calendar  gt  lt  span gt  x000D             lt  span gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt div class  col-md-5  gt  x000D         lt div class  form-group  gt  x000D           lt div class  input-group date  id  datetimepicker7  gt  x000D             lt input type  text  class  form-control    gt  x000D             lt span class  input-group-addon  gt  x000D                           lt span class  glyphicon glyphicon-calendar  gt  lt  span gt  x000D             lt  span gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D   x000D   x000D   lt  body gt  x000D   x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I changed the import sequence without fixing the problem  until finally I installed moments and tempus dominius  Core and bootrap   using npm and include them in boostrap js  try   window Popper   require  popper js   default  window     window jQuery   require  jquery    require  moment      added   require  bootstrap    require  tempusdominus-bootstrap-4     added    catch  e

User · Answer

Try to use datepicker  timepicker instead of datetimepicker like   replace       datetimepicker1   datetimepicker      with       datetimepicker1   datepicker       or timepicker for time picker

[javascript] Bootstrap datetimepicker is not a function

Examples related to javascript

Examples related to twitter-bootstrap-3