CODEWITHSUNDEEP
twitter-bootstraptimepicker
Justin
Justin

Reputation: 287

bootstrap timepicker not displayed

I've been stuffing around for over a week trying to make a bootstrap timepicker work. Any pointers would be most welcome. The bootstrap glyphicon time is displaying as too high but the main problem is that the timepicker is not being displayed.

html: 

<div  class="form-group col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="input-group" id="dep_time">
<label for="depart_time">Depart time</label>
<input placeholder="" class="form-control" name="dep_time" type="text">
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>                
</div>
</div>

script: $('#dep_time').timepicker();

<script src="http://localhost/js/script.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://localhost/js/jquery-1.11.1.min.js"></script>
<script src="http://localhost/js/jquery-ui.min.js"></script>
<script src="http://localhost/js/bootstrap-timepicker.min.js"></script>

Thanks.

Upvotes: 0

Views: 2689

Answers (1)

atmd
atmd

Reputation: 7490

is your $('#dep_time').timepicker(); in script.js?

if so, you are loading you own code before any of the libs/jquery etc

so this:

<script src="http://localhost/js/script.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://localhost/js/jquery-1.11.1.min.js"></script>
<script src="http://localhost/js/jquery-ui.min.js"></script>
<script src="http://localhost/js/bootstrap-timepicker.min.js"></script>

would need to be

<script src="http://localhost/js/jquery-1.11.1.min.js"></script>
<script src="http://localhost/js/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://localhost/js/bootstrap-timepicker.min.js"></script>
<script src="http://localhost/js/script.js"></script>

That might be one issue, however even that wouldnt work because timepicker needs to be fired on a input, and you are using a div

<div class="input-group" id="dep_time">
    ...            
</div>

should be 

<div class="input-group">
    ....
        <input id="dep_time" etc
    ....                
</div>

Upvotes: 2

Related Questions