Question

190

Bootstrap date time picker

rated 0 times [ 191] [ 1] / answers: 1 / hits: 173770 / 8 Years ago, fri, october 14, 2016, 12:00:00

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.

 $(function() {

   $('#datetimepicker1').datetimepicker();

 });

<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script>

<script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js></script>





<link rel=stylesheet type=text/css href=css/bootstrap-datetimepicker.css>

<link rel=stylesheet type=text/css href=css/bootstrap-datetimepicker.min.css>

<link rel=stylesheet type=text/css href=css/bootstrap-datetimepicker-standalone.css>

<script type=text/javascript src=js/bootstrap-datetimepicker.min.js></script>



</head>





<body>



  <div class=container>

    <div class=row>

      <div class='col-sm-6'>

        <div class=form-group>

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

        </div>

      </div>

    </div>

  </div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

matteo

Add To Favorites

Follow

Total Points: 81

Total Questions: 100

Total Answers: 96

Location: Honduras

Member since Sat, Jul 24, 2021

3 Years ago

answered 8 Years ago makiyac · Accepted 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:

$(function() {

  $('#datetimepicker1').datetimepicker();

});

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/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.7.14/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>



<div class=container>

  <div class=row>

    <div class='col-sm-6'>

      <div class=form-group>

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

      </div>

    </div>

  </div>

</div>