Bootstrap date time picker

Question

I am trying to implement the  date time picker as explained here https   eonasdan github io bootstrap-datetimepicker  minimum-setup  I have downloaded the js file css file to the directory js and css  But the calendar is not popup up when click on icon    x000D   x000D     function     x000D         datetimepicker1   datetimepicker    x000D       x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D   lt link rel  stylesheet  type  text css  href  css bootstrap-datetimepicker css  gt  x000D   lt link rel  stylesheet  type  text css  href  css bootstrap-datetimepicker min css  gt  x000D   lt link rel  stylesheet  type  text css  href  css bootstrap-datetimepicker-standalone css  gt  x000D   lt script type  text javascript  src  js bootstrap-datetimepicker min js  gt  lt  script gt  x000D   x000D   lt  head gt  x000D   x000D   x000D   lt body gt  x000D   x000D     lt div class  container  gt  x000D       lt div class  row  gt  x000D         lt div class  col-sm-6  gt  x000D           lt div class  form-group  gt  x000D             lt div class  input-group date  id  datetimepicker1  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     lt  div gt  x000D   x000D   x000D

User · Answer

In order to run the bootstrap date time picker you need to include Moment.js as well. Here is the working code sample in your case.

_x000D_

<!DOCTYPE html>_x000D_
    <html lang="en">_x000D_
    <head>_x000D_
      <meta charset="utf-8">_x000D_
      <meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">_x000D_
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>_x000D_
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
    _x000D_
    _x000D_
      <!-- <link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.css"> -->_x000D_
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>_x000D_
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css"> _x000D_
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker-standalone.css"> _x000D_
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>_x000D_
    _x000D_
    </head>_x000D_
    _x000D_
    _x000D_
    <body>_x000D_
    _x000D_
       <div class="container">_x000D_
          <div class="row">_x000D_
            <div class='col-sm-6'>_x000D_
                <div class="form-group">_x000D_
                    <div class='input-group date' id='datetimepicker1'>_x000D_
                        <input type='text' class="form-control" />_x000D_
                        <span class="input-group-addon">_x000D_
                            <span class="glyphicon glyphicon-calendar"></span>_x000D_
                        </span>_x000D_
                    </div>_x000D_
                </div>_x000D_
            </div>_x000D_
            <script type="text/javascript">_x000D_
                $(function () {_x000D_
                    $('#datetimepicker1').datetimepicker();_x000D_
                });_x000D_
            </script>_x000D_
          </div>_x000D_
       </div>_x000D_
    _x000D_
    _x000D_
    </body>_x000D_
    </html>

_x000D_

User · Answer

Try This    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D     lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt  x000D     lt script src  https   ajax googleapis com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt  x000D     lt script type  text javascript  src    maxcdn bootstrapcdn com bootstrap 3 3 1 js bootstrap min js  gt  lt  script gt  x000D     lt script src    cdnjs cloudflare com ajax libs moment js 2 9 0 moment-with-locales js  gt  lt  script gt  x000D     lt script src    cdn rawgit com Eonasdan bootstrap-datetimepicker e8bddc60e73c1ec2475f827be36e1957af72e2ea src js bootstrap-datetimepicker js  gt  lt  script gt  x000D   x000D   lt  head gt  x000D   x000D   x000D   lt body gt  x000D   x000D     lt div class  container  gt  x000D       lt div class  row  gt  x000D         lt div class  col-sm-6  gt  x000D           lt div class  form-group  gt  x000D             lt div class  input-group date  id  datetimepicker1  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 script type  text javascript  gt  x000D            function     x000D                datetimepicker1   datetimepicker    x000D              x000D         lt  script gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Well  here the positioning of the css and script links makes a to of difference  Bootstrap executes in CSS and then Scripts fashion  So if you have even one script written at incorrect place it makes a lot of difference  You can follow the below snippet and change your code accordingly    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D       lt meta charset  utf-8  gt  x000D       lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D       lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt  x000D       lt script src  https   ajax googleapis com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt  x000D       lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   x000D       lt  --  lt link rel  stylesheet  type  text css  href  css bootstrap-datetimepicker css  gt  -- gt  x000D       lt script type  text javascript  src  https   cdnjs cloudflare com ajax libs moment js 2 15 1 moment min js  gt  lt  script gt  x000D       lt link rel  stylesheet  type  text css  href  https   cdnjs cloudflare com ajax libs bootstrap-datetimepicker 4 17 43 css bootstrap-datetimepicker min css  gt   x000D       lt link rel  stylesheet  type  text css  href  https   cdnjs cloudflare com ajax libs bootstrap-datetimepicker 4 17 43 css bootstrap-datetimepicker-standalone css  gt   x000D       lt script type  text javascript  src  https   cdnjs cloudflare com ajax libs bootstrap-datetimepicker 4 17 43 js bootstrap-datetimepicker min js  gt  lt  script gt  x000D       x000D   lt  head gt  x000D   lt body gt  x000D        lt div class  container  gt  x000D             lt div class  row  gt  x000D               lt div class  col-sm-6  gt  x000D                   lt div class  form-group  gt  x000D                       lt div class  input-group date  id  datetimepicker1  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 script type  text javascript  gt  x000D                    function      x000D                          datetimepicker1   datetimepicker    x000D                      x000D               lt  script gt  x000D             lt  div gt  x000D          lt  div gt  x000D       lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You don t need to give local path  just give cdn link of bootstrap datetimepicker  and it works    x000D   x000D   lt html lang  en  gt  x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D    lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt  x000D     lt script src  https   ajax googleapis com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt  x000D     lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs bootstrap-datepicker 1 6 4 js bootstrap-datepicker js  gt  lt  script gt  x000D   x000D   lt  head gt  x000D   x000D   x000D   lt body gt  x000D   x000D      lt div class  container  gt  x000D         lt div class  row  gt  x000D           lt div class  col-sm-6  gt  x000D               lt div class  form-group  gt  x000D                   lt div class  input-group date  id  datetimepicker  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 script type  text javascript  gt  x000D                function      x000D                      datetimepicker   datepicker    x000D                  x000D           lt  script gt  x000D         lt  div gt  x000D      lt  div gt  x000D   x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

All scripts should be imported in order    jQuery and Moment js Bootstrap js file Bootstrap datepicker js file   Bootstrap-datetimepicker requires moment js to be loaded before datepicker js    Working snippet     x000D   x000D    function     x000D        datetimepicker1   datetimepicker    x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs moment js 2 15 1 moment min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs bootstrap-datetimepicker 4 7 14 js bootstrap-datetimepicker min js  gt  lt  script gt  x000D   x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 css bootstrap min css  gt  x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs bootstrap-datetimepicker 4 7 14 css bootstrap-datetimepicker min css  gt  x000D   x000D   lt div class  container  gt  x000D     lt div class  row  gt  x000D       lt div class  col-sm-6  gt  x000D         lt div class  form-group  gt  x000D           lt div class  input-group date  id  datetimepicker1  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   lt  div gt  x000D   x000D   x000D

[javascript] Bootstrap date time picker

Examples related to javascript

Examples related to html

Examples related to css

Examples related to twitter-bootstrap