i' m using Bootstrap Timepicker with twitter bootstrap but it doesn't shows the timepicker popup on clicking the timeicon

Question

when I clicked on time icon it shows nothing. I am using this code:

<div class="control-group">
    <label class="control-label">Next Time</label>
    <div class="controls">
        <div class="input-append bootstrap-timepicker">
            <input id="timepicker1" type="text" class="input-small">
            <span class="add-on"><i class="icon-time"></i></span>
        </div>
    </div>
</div>

and here is the script and CSS i m using:

<link type="text/css" href="assets/css/bootstrap-timepicker.min.css" />

<script type="text/javascript" src="assets/js/bootstrap-timepicker.min.js"></script>
<script type="text/javascript">
    $('#timepicker1').timepicker();
</script>

Answer 1

You have to put the id on your parent div :

<div class="control-group">
    <label class="control-label">Next Time</label>
    <div class="controls">
        <div id="timepicker1" class="input-append bootstrap-timepicker">
            <input type="text" class="input-small">
            <span class="add-on"><i class="icon-time"></i></span>
        </div>
    </div>
</div>