i am making an application and using bootstrap timepicker and its only showing current time in my input field but not showing time picker to select time picker please help me to resolve it . and also not showing any error .

HTML

<div class="col-xs-3"> <label>Invoice #</label>
   <input class="timepicker form-control " >
</div>

CSS

<!-- Bootstrap time Picker -->
<link rel="stylesheet" href="plugins/timepicker/bootstrap-timepicker.min.css">

JS

 <!-- bootstrap time picker -->
<script src="plugins/timepicker/bootstrap-timepicker.min.js"></script>

//Timepicker
$(".timepicker").timepicker({
    showInputs: false
});

i am making an application and using bootstrap timepicker and its only showing current time in my input field but not showing time picker to select time picker please help me to resolve it . and also not showing any error .

HTML

<div class="col-xs-3"> <label>Invoice #</label>
   <input class="timepicker form-control " >
</div>

CSS

<!-- Bootstrap time Picker -->
<link rel="stylesheet" href="plugins/timepicker/bootstrap-timepicker.min.css">

JS

 <!-- bootstrap time picker -->
<script src="plugins/timepicker/bootstrap-timepicker.min.js"></script>

//Timepicker
$(".timepicker").timepicker({
    showInputs: false
});

• javascript
• html
• css
• twitter-bootstrap
• timepicker

• Could you create/provide a working example of the issue you are experiencing or paste the entire html page so we can see ALL of your code? either an SO code snippet or a jsfiddle? it is difficult to debug it without an example. On the example page I see they use an ID instead of a Class, have you tried that? – Matthew Commented Dec 2, 2015 at 21:50
• sir i used id but still its not showing the timepicker when i load the page its only showing current time .. its mean there is no error in code but still not showing time picker to select time – asif Commented Dec 2, 2015 at 21:53
• did you include jquery in your script because I don't see any. Plus your javascript code is not within the script tags. Is it a mistake on copy-pasting here or actually you haven't included that? – marukobotto Commented Dec 2, 2015 at 22:00

4 Answers 4

I added bootstrap-timepicker class to the parent and it seems like it made it show up for me.

It seems to work for me.

<link href="https://netdna.bootstrapcdn./twitter-bootstrap/2.3.2/css/bootstrap-bined.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr/bootstrap.timepicker/0.2.6/css/bootstrap-timepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn./twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://code.jquery./jquery-1.9.1.js"></script>
<script src="https://cdn.jsdelivr/bootstrap.timepicker/0.2.6/js/bootstrap-timepicker.min.js"></script>


<div class="input-group bootstrap-timepicker timepicker">
  <input id="timepicker1" type="text" class="form-control input-small">
  <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>

<script type="text/javascript">
  $('#timepicker1').timepicker({
    showInputs: false
  });
</script>

Try changing your js.

$('.timepicker').timepicker();

In case the other answers don't work, add this properties to the timepicker container:

display: inline-block;
z-index: 99999 !important;

Hope it helps!