Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

Features:

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

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 standard text area for the time picker.

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

4. Call the plugin on the textual content discipline and executed it.

$(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.

• show2400: false: Show 24:00 as an option when using 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 argument or a jquery object to use directly default: “body”
• disableTouchKeyboard: true,: Disable the onscreen keyboard for touch devices.
• forceRoundTime: false: Force update 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:00am’, ‘4:30am’], [‘5:00pm’, ‘8:00pm’]] default: []
• closeOnWindowScroll: false,: Close the timepicker 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 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 prevent 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.

Customizable jQuery Timepicker Plugin, Timepicker Plugin/Github

See Demo And Download