Loading...

A clock-style timepicker for Bootstrap(or jQuery). Plugin page.

<!-- Css --><link rel="stylesheet" href="vendors/clockpicker/bootstrap-clockpicker.min.css" type="text/css"><!-- Javascript --><script src="vendors/clockpicker/bootstrap-clockpicker.min.js"></script>
Basic Usage
<div class="input-group clockpicker-example"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-clock-o"></i></span></div><input type="text" class="form-control" value="09:30"></div>
$('.clockpicker-example').clockpicker({donetext:'Done'});
Auto Close
<div class="input-group clockpicker-example"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-clock-o"></i></span></div><input type="text" class="form-control" value="18:30"></div>
$('.clockpicker-example').clockpicker({autoclose:true});
Set Default Value

Set default value,input without addon,and manual operations

<div class="input-group clockpicker-example"><div class="input-group-prepend"><button class="btn btn-primary" type="button" id="check-minutes">Check the minutes </button></div><input type="text" class="form-control"></div>
let input = $('.clockpicker-example').clockpicker({placement:'bottom',align:'left',autoclose:true,'default':'now'});$(document).on('click','#check-minutes',function(e){e.stopPropagation();input.clockpicker('show').clockpicker('toggleView','minutes')});