Here is the code snippet that I have utilized:
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script
src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js">
</script>
<script>
var time = "9";
$(function() {
$('#itime').timepicker({
minTime: time,
maxTime: '7:00pm',
'timeFormat': 'H:i:s'
});
});
</script>
<div class="input-group" style="margin-top: 10px;" onclick="shwtmpkr()">
<input type="text" id="itime" name="itime" class="form-control"
placeholder="Booking Time" style="background-color:white" /> @*
<input type='text' id="rTime" name="rTime" class="form-control" placeholder="Booking Date"
style="background-color:white" readonly="" />*@
<span class="input-group-addon">
<span class="fa fa-clock-o"></span>
</span>
</div>