Buttons on bootstrap timepicker is not showing

Question

I'm using a time picker but I can't get to make the buttons show. Here's how the timepicker looks.

Here's how I render it.

<input type="text" class="form-control timepicker appt_time" style="width:200px;">

<script>
$('.timepicker').timepicker();
</script>

Here's how I set them in my header

<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap.css">
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap-datepicker.css">
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap-timepicker.css">

<script type="text/javascript" src="/content/script/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/content/script/bootstrap.min.js"></script>
<script type="text/javascript" src="/content/script/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/content/script/bootstrap-timepicker.js"></script>

I got the css files and the js files for the timepicker Here.

Any ideas what's causing this? Thanks!

Answer 1

You have got css and js files but you've missed to capture the glyphicons.

The glyphicons are responsible for showing the buttons on the timepicker.

If you can inspect your developer tools on your buttons you can see that the images seems to be missing.

Here is what i've found on the site that you have picked timepicker

Include the glyphicons png file on your site to get the images work perfect.

Hope this helps

Answer 2

Try script as...

<script type="text/javascript">
    $("input[id$='timepicker']").timepicker({
        minuteStep: 5,
        showInputs: false,
        disableFocus: true
    });        
</script>

Give an id , say id="timpick" and in call as $('#timpick').timepicker(options);