Features:

• Highly customizable to meet your specific requirements
• Mouse wheel support
• Support for navigation using the keyboard
• Lightweight and easy to use

Must Read: A Simple and Modern Event Calendar In jQuery | Evo-Calendar

How to make use of it:

1.  Include jQuery library and timepicker.js

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.timepicker.js"></script>

2. Include time picker CSS to type your time picker.

<link rel="stylesheet" href="jquery.timepicker.css" />

3. Create a text area for the time picker.

<input id="basicExample" type="text" class="time" />

4. Call the plugin on the textual content.

$(function() {
  $('#basicExample').timepicker({
    // options here
  });
});

5. Public strategies.

// Get the time as an integer, expressed as seconds from 12am.
$('#getTimeExample').timepicker('getSecondsFromMidnight');

// Get the time using a Javascript Date object, relative to a Date object (default: today's date).
$('#getTimeExample').timepicker('getTime');
$('#getTimeExample').timepicker('getTime', new Date());

// Close the timepicker dropdown.
$('#hideExample').timepicker('hide');

// Change the settings of an existing timepicker. 
// Calling option on a visible timepicker will cause the picker to be hidden.
$('#optionExample').timepicker({ 'timeFormat': 'g:ia' });

// Unbind an existing timepicker element.
$('#removeExample').timepicker('remove');

// Set the time using a Javascript Date object.
$('#setTimeExample').timepicker('setTime', new Date());

// Display the timepicker dropdown.
$('#showExample').timepicker('show');

All default customization options.

Must Read: Calendar Component and Convenient Date Picker | tui.date picker

• show2400: false: Show 24:00 as an option when using the 24-hour time format.
• className: null: A class name to apply to the HTML element that contains the timepicker dropdown.
• minTime: 12:00am: The time that should appear first in the dropdown list.
• maxTime:: The time that should appear last in the dropdown list. Can be used to limit the range of time options. default: 24 hours after minTime
• showOnFocus: true: Display a timepicker dropdown when the input gains focus.
• showDuration: false: Shows the relative time for each item in the dropdown. minTime or durationTime must be set.
• durationTime:: The time against which showDuration will compute relative times. default: minTime
• step: 30: The amount of time, in minutes, between each item in the dropdown.
• timeFormat: ‘g:ia’: How times should be displayed in the list and input element. Uses PHP’s date() formatting syntax.
• scrollDefault: null: If no time value is selected, set the dropdown scroll position to show the time provided.
• orientation: ‘ltr’,: ltr or rtl.
• selectOnBlur: false: Update the input with the currently highlighted time value when the time picker loses focus.
• appendTo: Override where the dropdown is appended. Takes either a string to use as a selector, a function that gets passed the clicked input element as an argument, or a jquery object to use directly default: “body”

Must Read: 📅 A Simple Dynamic Calendar In Javascript | tui.calendar

• disableTouchKeyboard: true, Disable the onscreen keyboard for touch devices.
• forceRoundTime: false: Force updates the time to step settings as soon as it loses focus. default: false
• listWidth: null: Set to 1 to match input width, 2 to double input width, .5 to halve input width, etc
• disableTimeRanges: [],: Disable selection of certain time ranges. Input is an array of time pairs, like `[[‘3:00 am’, ‘4:30 am’], [‘5:00 pm’, ‘8:00 pm’]] default: []
• closeOnWindowScroll: false, Close the time picker when the window is scrolled. (Replicates <select> behavior.) default: false
• typeaheadHighlight: true, Highlight the nearest corresponding time option as a value is typed into the form input. default: true
• noneOption: false: Adds a “None” option to the top of the timepicker dropdown default: false
• showOn: true: Display a timepicker dropdown when the input fires a particular event. Set to false to disable automatic display.
• disableTextInput: false: Disable typing in the timepicker input box; force users to select from the list.
• lang: { am: ‘am’, pm: ‘pm’, AM: ‘AM’, PM: ‘PM’, decimal: ‘.’, mins: ‘mins’, hr: ‘hr’, hrs: ‘hrs’ }: Language constants used in the timepicker. Can override the defaults by passing an object with one or more of the following properties: decimal, mins, hr, hrs.
• roundingFunction: round to nearest step: Function used to compute rounded times. The function will receive time in seconds and a settings object as arguments. The function should handle a null value for seconds.
• stopScrollPropagation: false: When scrolling on the edge of the picker, it prevents parent containers () to scroll.
• useSelect: false: Convert the input to an HTML SELECT control. This is ideal for small-screen devices, or if you want to prevent the user from entering arbitrary values. This option is not compatible with the following options: appendTo, closeOnWindowScroll, disableTouchKeyboard, forceRoundTime, scrollDefault, selectOnBlur, typeAheadHighlight.

See Demo And Download