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