CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapdatepicker
Blueblazer172
Blueblazer172

Reputation: 600

Bootstrap-Datepicker not working properly

My bootstrap-datetimepicker is not working properly
This question has been asked a lot of times here, but the answers from here, here and here and manny others didn't help me further...

at the top of my webpage in the<head> i'm including:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">

and then in my form i want to call him like this:

<div class="col-md-4">
    <label class="control-label" for="birthday">Birthday:</label>
       <div class="form-group">
          <div class='input-group date' id='datetimepicker'>
              <input type='text' class="form-control" placeholder="dd/mm/yyyy" value="" />
              <span class="input-group-addon">
                 <span class="glyphicon glyphicon-calendar"></span>
              </span>
           </div>
       </div>
</div>

and at the bottom before the </body> tag there is the javascript/jquery part:

<script type="text/javascript">
   $('#datetimepicker').datepicker();
</script>

What am i doing wrong ? Can someone correct my mistakes ?

Upvotes: 1

Views: 9063

Answers (2)

GvM
GvM

Reputation: 1733

i've read that bootstrap datepicker requires jquery 1.7.1 and up

check this fiddle im using jquery 1.9.1

<div class="col-md-4">
    <label class="control-label" for="birthday">Birthday:</label>
       <div class="form-group">
          <div class='input-group date' id='datetimepicker'>
              <input type='text' class="form-control" placeholder="dd/mm/yyyy" value="" />
              <span class="input-group-addon">
                 <span class="glyphicon glyphicon-calendar"></span>
              </span>
           </div>
       </div>
</div>

Upvotes: 1

emtei
emtei

Reputation: 631

Try wrap plugin initialization in document ready function.

<script type="text/javascript">
    $(document).ready(function() {
        $('#datetimepicker').datepicker();
    });
</script>

Upvotes: 1

Related Questions