jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact.
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

Official Website(jonthornton): Click Here
This superior jQuery/javascript plugin is developed by jonthornton. For extra Advanced Usage, please go to the official website.