Customizable jQuery Timepicker Plugin - timepicker

Customizable jQuery Timepicker Plugin - timepicker
File Size: 62.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

timepicker is a lightweight (~2.5kb minified and gzipped) jQuery plugin inspired by Google Calendar that adds highly customizable time picker to your project.

Features:

  • Highly customizable to meet your special requirements
  • Mouse wheel supported
  • Keyboard navigation supported
  • Lightweight and easy to use

See also:

Basic Usage:

1.  Include jQuery library and timepicker.js

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.timepicker.js"></script>

2. Inlcude timepicker CSS to style your plugin

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

3. Markup

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

4. Call the plugin

<script>
$(function() {
$('#basicExample').timepicker();
});
</script>

5. More 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 timepicker 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
  • 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.

6. Public methods.

// 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');

Change Logs:

v1.11.11 (2017-05-15)

  • Fix changeTime event incorrectly fired on setTime

v1.11.10 (2017-02-20)

  • Refactor default settings to not brake plugin renaming

v1.11.9 (2016-12-13)

  • Improvements to option method

v1.11.7 (2016-11-25)

  • Fix 00:00 not highlighted in dropdown

v1.11.7 (2016-11-14)

  • Fix forceRoundTime with minTime glitch

v1.11.6 (2016-10-26)

  • Data attributes override init options

v1.11.5 (2016-09-19)

  • Fix changeTime firing on init

v1.11.4 (2016-09-08)

  • Fix broken range bounds check

v1.11.3 (2016-09-05)

  • Hitting return with list open triggers _timeFormat()

v1.11.2 (2016-08-17)

  • update

v1.11.1 (2016-05-03)

  • Fix mobile Chrome bug

v1.10.1 (2016-05-03)

  • Add isVisible method

v1.9.0 (2016-04-18)

  • New base date logic

v1.8.11 (2016-03-27)

  • Fix integers in noneOption value interpreted as time

v1.8.10 (2016-02-05)

  • Fix $('#input').timepicker('option', 'minTime')
  • Fix broken tab when disableTextInput: true

v1.8.9 (2016-01-10)

  • Fix missing var in for-each

v1.8.8 (2015-11-29)

  • Add am/pm classes to dropdown items

v1.8.7 (2015-11-17)

  • Fix overflow time parsing

v1.8.6 (2015-11-10)

  • disableTextInput uses keydown

v1.8.5 (2015-11-03)

  • JS update.

v1.8.4 (2015-11-02)

  • Fix show2400 option

v1.8.3 (2015-10-24)

  • Fix broken scrollDefault when invalid initial value

v1.8.2 (2015-09-09)

  • Fix 24-hour time values getting incorrect am/pm

v1.8.1 (2015-06-30)

  • Fix showOn bug

v1.8.0 (2015-06-16)

  • Fixed accidentally reverted stopScrollPropagation

v1.7.0 (2015-05-27)

  • Triumphant return of disableTextInput

v1.6.12 (2015-05-13)

  • Fix setTime to noneOption

v1.6.11 (2015-04-14)

  • Fix closure when using string for scrollDefault

v1.6.10 (2015-04-11)

  • Fix scrollDefault not changing when minTime updated

v1.6.9 (2015-04-10)

  • Fix getTime for 12:00am value

v1.6.8 (2015-04-02)

  • getTime returns null for unparsable time values

v1.6.7 (2015-03-30)

  • Fix setTime broken with useSelect: true

v1.6.6 (2015-03-29)

  • Fix arrow keys with typeaheadHighlight: false

v1.6.5 (2015-03-19)

  • Correctly handle .val() changes

v1.6.4 (2015-03-12)

  • Timepicker hides on window resize

v1.6.0 (2015-02-11)

  • Setting minTime and maxTime results in 1 dropdown option
  • Add roundingFunction option

v1.5.3 (2015-01-28)

  • Fix event.target in Chrome when clicking dropdown item
  • Improve orientation setting and add documentation

v1.5.2 (2015-01-22)

  • Add support for specifying a function for step function

v1.5.1 (2015-01-12)

  • Fixed am/pm prediction in _formatValue()

v1.5.0 (2015-01-07)

  • Added show2400 option to toggle showing 24:00

2014-10-15

  • Added ui-timepicker-positioned-top class when timepicker is positioned above input.

v1.4.13 (2014-10-05)

  • Added ui-timepicker-positioned-top class when timepicker is positioned above input.

v1.4.11 (2014-09-24)

  • Fixed noneOption with useSelect.

v1.4.10 (2014-09-22)

  • Fixed duplicate 'selectTime' events.

v1.4.10 (2014-09-18)

  • Fixed initializing input value when using useSelect.

v1.4.9 (2014-09-16)

  • Fixed _time2int() regex when using custom am/pm strings

v1.4.8 (2014-09-16)

  • update.

v1.4.7 (2014-08-05)

  • Fixed error when passing array for noneOption. 

v1.4.6 (2014-08-05)

  • Fixed escaping timeFormat. 

v1.4.5 (2014-08-01)

  • Impoved time string parsing in _time2int().

v1.4.4 (2014-07-29)

  • setTime() now respects forceRoundTime option.

v1.4.3 (2014-07-16)

  • Fixed modifying options for multiple timepickers.

v1.4.2 (2014-07-16)

  • Fixed negative duration display.

v1.4.0 (2014-07-07)

  • Removed scrollDefaultNow, scrollDefaultTime; added scrollDefault

v1.3.10 (2014-07-04)

  • Added 'showOnFocus' option.

v1.3.9 (2014-06-20)

  • Fixed missing param in _int2duration().
  • Fixed useSelect/remove() bug

v1.3.8 (2014-05-23)

  • update

v1.3.6 (2014-04-20)

  • Fixed formatting bug in IE.

v1.3.6 (2014-04-14)

  • Fixed formatting when clicking into another timepicker. 

v1.3.5 (2014-02-25)

  • Expanded noneOption functionality

v1.3.4 (2014-02-24)

  • version update.

v1.3.3 (2014-02-10)

  • Method calls to uninitialized timepickers will no longer produce JS errors

v1.3.2 (2014-02-04)

  • noneOption will now accept a string to customize the 'None' option label.

v1.3.1 (2014-01-13)

  • Fixed method chaining

v1.3.0 (2014-01-13)

  • Added noneOption
  • First draft at select rendering

v1.2.17 (2014-01-09)

  • Fixed error when calling show() directly.

v1.2.16 (2014-01-06)

  • Added support for setting options as data attributes.

v1.2.14 (2013-12-24)

  • getTime now correctly returns null if no value selected. 

v1.2.14 (2013-12-17)

  • Fixed 24:00 value not being set. 

v1.2.13 (2013-12-12)

  • Fixed extra focus propagation after showTimepicker event

v1.2.12 (2013-11-27)

  • Fixed minTime not being updated when dates are different.
  • Fixed selected value not being highlighted sometimes when minTime set.

v1.2.11 (2013-11-17)

  • 'disableTouchKeyboard' now defaults to false.

v1.2.10 (2013-11-09)

  • Fixed bug with overlapping disableTimeRanges.

v1.2.8 (2013-10-26)

  • Fixed close handler for browsers that support both mouse and touch events. 

v1.2.7 (2013-09-08)

  • Fixed events not firing

v1.2.4 (2013-08-28)

  • Fixed setTime() not updating list selector. 

v1.2.2 (2013-08-16)

  • Fixed changeTime not firing when user types in perfectly formatted time value.

v1.2.1 (2013-08-15)

  • Fixed incorrect touch detection in IE10

This awesome jQuery plugin is developed by jonthornton. For more Advanced Usages, please check the demo page or visit the official website.