CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstraptimepicker
asif
asif

Reputation: 13

bootstrap timepicker not showing time picker option

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
});

Upvotes: 1

Views: 25490

Answers (4)

Alvaro
Alvaro

Reputation: 2069

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!

Upvotes: 0

Webmaster G
Webmaster G

Reputation: 532

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

Upvotes: 9

sleepDrifter
sleepDrifter

Reputation: 591

It seems to work for me.

<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/bootstrap.timepicker/0.2.6/css/bootstrap-timepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdn.jsdelivr.net/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>

Upvotes: 2

Andy
Andy

Reputation: 99

Try changing your js.

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

Upvotes: 0

Related Questions