jQuery Plugins › jQuery Time & Clock Plugins › jQuery Timepicker

Customizable jQuery Timepicker Plugin - timepicker

File Size:	252 KB
Views Total:	63798
Last Update:	08/24/2023 00:52:00 UTC
Publish Date:	02/17/2013 04:46:19 UTC
Official Website:	Go to website
License:	MIT

Demo Download

Features:

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

Basic Usage:

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. Inlcude timepicker CSS to style your time picker.

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

3. Create a normal text field for the time picker.

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

4. Call the plugin on the text field and done.

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

5. 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
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
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.

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

Changelog:

v1.14.1 (2023-08-24)

Updated

v1.14.0 (2022-09-26)

Remove showOnFocus setting that has been broke for 7 years

v1.13.19 (2022-09-26)

Better predictive typeahead when no delimeters are used
Fix disableTimeRanges not working if time ranges are before minTime

2021-04-22

JS updated

2021-04-22

JS updated

2021-04-12

Rounding issue fixed

v1.13.18 (2021-02-08)

Standardized inputs for anything that takes a time value

v1.13.16 (2021-02-07)

Revert focus change back to native JS.
Fixed IE 11 issues.

v1.13.15 (2020-09-24)

Removed spurious console.log
Moved _setSelected

v1.13.14 (2020-08-04)

Fix '00' not resolving to 12AM

v1.13.13 (2020-08-03)

Fix dropdown incorrectly closing on touch events

v1.13.12 (2020-08-03)

Remove console.log, version bump

v1.13.11 (2020-05-14)

Fix minified CSS missing from files list

v1.13.10 (2020-05-14)

Fix error when passing time int to setTime

v1.13.9 (2020-05-09)

Fix undefined prop causing error

v1.13.8 (2020-05-08)

Transpile to ES5

v1.13.7 (2020-05-07)

Fix backwards-incompatible package structure

v1.13.5 (2020-05-03)

Fix broken time parsing regex

v1.13.4 (2020-04-06)

Fix broken time parsing regex

v1.13.3 (2020-03-23)

Remove unsupported unicode flag from regex

v1.13.2 (2020-03-08)

Fix HTML5 form required field validation triggered on init

v1.13.1 (2020-03-01)

Fix HTML5 form required field validation triggered on init

v1.13.0 (2019-12-30)

Updated

v1.12.0 (2019-11-24)

Add listWidth option

v1.11.15 (2019-05-12)

Updated to the latest version

v1.11.14 (2018-06-03)

Select element for useSelect inherits input name

v1.11.13 (2017-11-20)

Fix noneOption undefined

v1.11.12 (2017-09-25)

Fix selectTime incorrectly thrown for setTime
Fix broken setTime with useSelect

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.

Customizable jQuery Timepicker Plugin - timepicker

Features:

See also:

Basic Usage:

Changelog:

Related jQuery Plugins

You Might Also Like

Add Your Review