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