<!-- Css -->
<link rel="stylesheet" href="vendors/clockpicker/bootstrap-clockpicker.min.css" type="text/css">

<!-- Javascript -->
<script src="vendors/clockpicker/bootstrap-clockpicker.min.js"></script>

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

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

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