How to make use of it:

1. Include the jQuery javascript library and jQuery qcTimepicker plugin on the bottom of the web web page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/qcTimepicker.min.js"></script>

2. Create a time input for the dropdown time picker.

<input type="time" class="timepicker" id="demo" required />

3. Call the plugin on the time input to create a basic time picker.

$(document).ready(function() {
  $('.timepicker').qcTimepicker();
});

4. Available choices to customize the time format, step, and time range.

$('.timepicker').qcTimepicker({

  // additional CSS classes
  classes: '',

  // time format
  format: 'H:mm',

  // min/max time
  minTime: '0:00:00',
  maxTime: '23:59:59',

  // step size in ms
  step: 1800,

  // custom placeholder
  placeholder: '-',
  
});

5. Public strategies.

// show the time picker
$('.timepicker').qcTimepicker('show');

// hide the time picker
$('.timepicker').qcTimepicker('hide');

// destroy the time picker
$('.timepicker').qcTimepicker('destroy');

// increment or decrement the value
$('.timepicker').qcTimepicker('stepUp');
$('.timepicker').qcTimepicker('stepDown');

// get the current value
$('.timepicker').qcTimepicker('valueAsNumber');
$('.timepicker').qcTimepicker('valueAsDate');

Small Accessible jQuery Dropdown Time Picker, qcTimepicker Plugin/Github, jquery timepicker 12 hour format

See Demo And Download