Jon Kittell Jon Kittell - 4 months ago 8
Javascript Question

Bootstrap Timepicker not displaying

I have a modal window where I have a table where the user can choose times. I was able to get the timepicker to work inside the tables in this example.

$('.timepicker').timepicker().on('changeDate', function(ev){
$('.timepicker').timepicker('hide');
});


However, in this example the timepicker is not displaying. There are no exceptions being thrown.

Answer

I ended up going with a jquery plugin which worked right out of the box for selecting the times.

HTML

<label><input id="mondayStartTime" type="text" style="width:100px" data-bind="value: mondayStartTime" class="time ui-timepicker-input"></input>Start</label>
<label><input id="mondayEndTime" type="text" style="width:100px" data-bind="value: mondayEndTime" class="time ui-timepicker-input"></input>End</label>

Javascript

$('#mondayStartTime').timepicker();
$('#mondayEndTime').timepicker();

Available via CDN.

It works well inside the modal dialog.

Here is an example:

http://jsfiddle.net/jkittell/C8w8v/126/

Comments