Customizable jQuery Timepicker Plugin – timepicker

timepicker is a light-weight (~2.5kb minified and gzipped) jQuery plugin impressed by Google Calendar that provides extremely customizable time picker to your challenge.

Options:

• Extremely customizable to satisfy your particular necessities
• Mouse wheel supported
• Keyboard navigation supported
• Light-weight and straightforward to make use of

See additionally:

Primary Utilization:

1.  Embrace jQuery library and timepicker.js

<script sort="textual content/javascript" src="jquery.min.js"></script>
<script sort="textual content/javascript" src="jquery.timepicker.js"></script>

2. Inlcude timepicker CSS to fashion your time picker.

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

3. Create a standard textual content discipline for the time picker.

<enter id="basicExample" sort="textual content" class="time" />

4. Name the plugin on the textual content discipline and achieved.

$(operate() {
  $('#basicExample').timepicker({
    // choices right here
  });
});

5. All default customization choices.

• show2400: false: Present 24:00 as an choice when utilizing 24-hour time format.
• className: null: A category title to use to the HTML component that accommodates the timepicker dropdown. 
• minTime: 12:00am: The time that ought to seem first within the dropdown record.
• maxTime:: The time that ought to seem final within the dropdown record. Can be utilized to restrict the vary of time choices. default: 24 hours after minTime
• showOnFocus: true: Show a timepicker dropdown when the enter features focus.
• showDuration: false: Reveals the relative time for every merchandise within the dropdown. minTime or durationTime have to be set. 
• durationTime:: The time towards which showDuration will compute relative instances. default: minTime
• step: 30: The period of time, in minutes, between every merchandise within the dropdown.
• timeFormat: 'g:ia': How instances must be displayed within the record and enter component. Makes use of PHP’s date() formatting syntax. 
• scrollDefault: null: If no time worth is chosen, set the dropdown scroll place to indicate the time supplied.
• orientation: 'ltr',: ltr or rtl.
• selectOnBlur: false: Replace the enter with the at present highlighted time worth when the timepicker loses focus. 
• appendTo: Override the place the dropdown is appended. Takes both a string to make use of as a selector, a operate that will get handed the clicked enter component as argument or a jquery object to make use of instantly default: “physique”
• disableTouchKeyboard: true,: Disable the onscreen keyboard for contact units. 
• forceRoundTime: false:  Power replace the time to step settings as quickly because it loses focus. default: false
• listWidth: null: Set to 1 to match enter width, 2 to double enter width, .5 to halve enter width, and so forth
• disableTimeRanges: [],: Disable choice of sure time ranges. Enter is an array of time pairs, like `[[‘3:00am’, ‘4:30am’], [‘5:00pm’, ‘8:00pm’]] default: []
• closeOnWindowScroll: false,: Shut the timepicker when the window is scrolled. (Replicates <choose> conduct.) default: false
• typeaheadHighlight: true,: Spotlight the closest corresponding time choice as a worth is typed into the shape enter. default: true
• noneOption: false: Provides a “None” choice to the highest of the timepicker dropdown default: false
• showOn: true: Show a timepicker dropdown when the enter fires a specific occasion. Set to false to disable automated show. 
• disableTextInput: false: Disable typing within the timepicker enter field; drive customers to pick out from record.
• lang: { am: 'am', pm: 'pm', AM: 'AM', PM: 'PM', decimal: '.', minutes: 'minutes', hr: 'hr', hrs: 'hrs' }: Language constants used within the timepicker. Can override the defaults by passing an object with a number of of the next properties: decimal, minutes, hr, hrs.
• roundingFunction: spherical to nearest step: Perform used to compute rounded instances. The operate will obtain time in seconds and a settings object as arguments. The operate ought to deal with a null worth for seconds.
• stopScrollPropagation: false: When scrolling on the sting of the picker, it stop dad or mum containers () to scroll.
• useSelect: false: Convert the enter to an HTML SELECT management. That is excellent for small display screen units, or if you wish to stop the person from getting into arbitrary values. This feature will not be suitable with the next choices: appendTo, closeOnWindowScroll, disableTouchKeyboard, forceRoundTime, scrollDefault, selectOnBlur, typeAheadHighlight.

6. Public strategies.

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

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

// Shut the timepicker dropdown.
$('#hideExample').timepicker('cover');

// Change the settings of an present timepicker. 
// Calling choice on a visual timepicker will trigger the picker to be hidden.
$('#optionExample').timepicker({ 'timeFormat': 'g:ia' });

// Unbind an present timepicker component.
$('#removeExample').timepicker('take away');

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

// Show the timepicker dropdown.
$('#showExample').timepicker('present');

Changelog:

v1.13.19 (2022-09-26)

• Higher predictive typeahead when no delimeters are used
• Repair disableTimeRanges not working if time ranges are earlier than minTime

2021-04-22

2021-04-22

2021-04-12

 v1.13.18 (2021-02-08)

• Standardized inputs for something that takes a time worth

v1.13.16 (2021-02-07)

• Revert focus change again to native JS.
• Mounted IE 11 points.

v1.13.15 (2020-09-24)

• Eliminated spurious console.log
• Moved _setSelected

v1.13.14 (2020-08-04)

• Repair ’00’ not resolving to 12AM

v1.13.13 (2020-08-03)

• Repair dropdown incorrectly closing on contact occasions

v1.13.12 (2020-08-03)

• Take away console.log, model bump

v1.13.11 (2020-05-14)

• Repair minified CSS lacking from information record

v1.13.10 (2020-05-14)

• Repair error when passing time int to setTime

v1.13.9 (2020-05-09)

• Repair undefined prop inflicting error

v1.13.8 (2020-05-08)

v1.13.7 (2020-05-07)

• Repair backwards-incompatible bundle construction

v1.13.5 (2020-05-03)

• Repair damaged time parsing regex

v1.13.4 (2020-04-06)

• Repair damaged time parsing regex

v1.13.3 (2020-03-23)

• Take away unsupported unicode flag from regex

v1.13.2 (2020-03-08)

• Repair HTML5 type required discipline validation triggered on init

v1.13.1 (2020-03-01)

• Repair HTML5 type required discipline validation triggered on init

v1.13.0 (2019-12-30)

v1.12.0 (2019-11-24)

v1.11.15 (2019-05-12)

• Up to date to the most recent model

v1.11.14 (2018-06-03)

• Choose component for useSelect inherits enter title

v1.11.13 (2017-11-20)

v1.11.12 (2017-09-25)

• Repair selectTime incorrectly thrown for setTime
• Repair damaged setTime with useSelect

v1.11.11 (2017-05-15)

• Repair changeTime occasion incorrectly fired on setTime

v1.11.10 (2017-02-20)

• Refactor default settings to not brake plugin renaming

v1.11.9 (2016-12-13)

• Enhancements to choice methodology

v1.11.7 (2016-11-25)

• Repair 00:00 not highlighted in dropdown

v1.11.7 (2016-11-14)

• Repair forceRoundTime with minTime glitch

v1.11.6 (2016-10-26)

• Knowledge attributes override init choices

v1.11.5 (2016-09-19)

• Repair changeTime firing on init

v1.11.4 (2016-09-08)

• Repair damaged vary bounds verify

v1.11.3 (2016-09-05)

• Hitting return with record open triggers _timeFormat()

v1.11.2 (2016-08-17)

v1.11.1 (2016-05-03)

v1.10.1 (2016-05-03)

v1.9.0 (2016-04-18)

v1.8.11 (2016-03-27)

• Repair integers in noneOption worth interpreted as time

v1.8.10 (2016-02-05)

• Repair $(‘#enter’).timepicker(‘choice’, ‘minTime’)
• Repair damaged tab when disableTextInput: true

v1.8.9 (2016-01-10)

• Repair lacking var in for-each

v1.8.8 (2015-11-29)

• Add am/pm lessons to dropdown gadgets

v1.8.7 (2015-11-17)

• Repair overflow time parsing

v1.8.6 (2015-11-10)

• disableTextInput makes use of keydown

v1.8.5 (2015-11-03)

v1.8.4 (2015-11-02)

v1.8.3 (2015-10-24)

• Repair damaged scrollDefault when invalid preliminary worth

v1.8.2 (2015-09-09)

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

v1.8.1 (2015-06-30)

v1.8.0 (2015-06-16)

• Mounted by chance reverted stopScrollPropagation

v1.7.0 (2015-05-27)

• Triumphant return of disableTextInput

v1.6.12 (2015-05-13)

• Repair setTime to noneOption

v1.6.11 (2015-04-14)

• Repair closure when utilizing string for scrollDefault

v1.6.10 (2015-04-11)

• Repair scrollDefault not altering when minTime up to date

v1.6.9 (2015-04-10)

• Repair getTime for 12:00am worth

v1.6.8 (2015-04-02)

• getTime returns null for unparsable time values

v1.6.7 (2015-03-30)

• Repair setTime damaged with useSelect: true

v1.6.6 (2015-03-29)

• Repair arrow keys with typeaheadHighlight: false

v1.6.5 (2015-03-19)

• Appropriately deal with .val() modifications

v1.6.4 (2015-03-12)

• Timepicker hides on window resize

v1.6.0 (2015-02-11)

• Setting minTime and maxTime ends in 1 dropdown choice
• Add roundingFunction choice

v1.5.3 (2015-01-28)

• Repair occasion.goal in Chrome when clicking dropdown merchandise
• Enhance orientation setting and add documentation

v1.5.2 (2015-01-22)

• Add assist for specifying a operate for step operate

v1.5.1 (2015-01-12)

• Mounted am/pm prediction in _formatValue()

v1.5.0 (2015-01-07)

• Added show2400 choice to toggle displaying 24:00

2014-10-15

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

v1.4.13 (2014-10-05)

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

v1.4.11 (2014-09-24)

• Mounted noneOption with useSelect.

v1.4.10 (2014-09-22)

• Mounted duplicate ‘selectTime’ occasions.

v1.4.10 (2014-09-18)

• Mounted initializing enter worth when utilizing useSelect.

v1.4.9 (2014-09-16)

• Mounted _time2int() regex when utilizing customized am/pm strings

v1.4.8 (2014-09-16)

v1.4.7 (2014-08-05)

• Mounted error when passing array for noneOption. 

v1.4.6 (2014-08-05)

• Mounted escaping timeFormat. 

v1.4.5 (2014-08-01)

• Impoved time string parsing in _time2int().

v1.4.4 (2014-07-29)

• setTime() now respects forceRoundTime choice.

v1.4.3 (2014-07-16)

• Mounted modifying choices for a number of timepickers.

v1.4.2 (2014-07-16)

• Mounted destructive length show.

v1.4.0 (2014-07-07)

• Eliminated scrollDefaultNow, scrollDefaultTime; added scrollDefault

v1.3.10 (2014-07-04)

• Added ‘showOnFocus’ choice.

v1.3.9 (2014-06-20)

• Mounted lacking param in _int2duration().
• Mounted useSelect/take away() bug

v1.3.8 (2014-05-23)

v1.3.6 (2014-04-20)

• Mounted formatting bug in IE.

v1.3.6 (2014-04-14)

• Mounted formatting when clicking into one other timepicker. 

v1.3.5 (2014-02-25)

• Expanded noneOption performance

v1.3.4 (2014-02-24)

v1.3.3 (2014-02-10)

• Technique calls to uninitialized timepickers will now not produce JS errors

v1.3.2 (2014-02-04)

• noneOption will now settle for a string to customise the ‘None’ choice label.

v1.3.1 (2014-01-13)

v1.3.0 (2014-01-13)

• Added noneOption
• First draft at choose rendering

v1.2.17 (2014-01-09)

• Mounted error when calling present() instantly.

v1.2.16 (2014-01-06)

• Added assist for setting choices as information attributes.

v1.2.14 (2013-12-24)

• getTime now accurately returns null if no worth chosen. 

v1.2.14 (2013-12-17)

• Mounted 24:00 worth not being set. 

v1.2.13 (2013-12-12)

• Mounted further focus propagation after showTimepicker occasion

v1.2.12 (2013-11-27)

• Mounted minTime not being up to date when dates are completely different.
• Mounted chosen worth not being highlighted typically when minTime set.

v1.2.11 (2013-11-17)

• ‘disableTouchKeyboard’ now defaults to false.

v1.2.10 (2013-11-09)

• Mounted bug with overlapping disableTimeRanges.

v1.2.8 (2013-10-26)

• Mounted shut handler for browsers that assist each mouse and contact occasions. 

v1.2.7 (2013-09-08)

v1.2.4 (2013-08-28)

• Mounted setTime() not updating record selector. 

v1.2.2 (2013-08-16)

• Mounted changeTime not firing when person sorts in completely formatted time worth.

v1.2.1 (2013-08-15)

• Mounted incorrect contact detection in IE10

This superior jQuery plugin is developed by jonthornton. For extra Superior Usages, please verify the demo web page or go to the official web site.