What is this?
It’s a time picker similar to how Google Calendar’s time picker works for events. It’s meant to be smart, sexy and intuitive.
Some things that make is super duper fantastic:
- Start time defaults to users current time (within your set increment).
- Tabbing out of the field without selecting a time will cause it to make an educated guess. Try typing a badly
- formatted time like 115 or 1 or 1pm or 28 then tabbing out.
- If the end time is less than the start time, evaluate it to the opposite am/pm of the start time. Example: 7:00AM – 5…
- 5 will default to PM.
- Fetch time in H:i:s format (13:30:00) for comparing/validating. Done so by calling
- $(input).data(‘timeAutocomplete’).getTime()
- Uses placeholder attribute if detected, if not, it uses our own placeholder text.
- Oh, and it’s tested ? – see tests/index.html to run tests
Basic usage
$('#basic-example').timeAutocomplete();
Advanced usage #1
Injecting an existing value and using 24hr as the formatter.
$('#from-24hr').timeAutocomplete({
formatter: '24hr',
value: '07:00:00'
});
$('#to-24hr').timeAutocomplete({
formatter: '24hr',
value: '09:30:00'
});
From To
Advanced usage #2
Using a ‘from’ and ‘to’ input. We use a ‘from_selector’ argument in the set of options on the ‘to’ field. Thismakes the time autocomplete aware of the time in the otherfield. If the ‘from’ field is ‘8:00 AM’ and we start typing into the ‘to’ field with ‘4’, it will show us a listof 4 ‘PM’ instead of 4 ‘AM’ options.
$('#from-ampm').timeAutocomplete({
increment: 5,
value: '08:00:00'
});
$('#to-ampm').timeAutocomplete({
increment: 5,
from_selector: '#from-ampm',
value: '17:30:00' // likely populated from your database.
});
From To
Initialization options
Below is a set of options you can pass when you call $(‘#my-input’).timeAutocomplete(options);
options = {
| Option key |
Default value |
Possible values |
Description |
| []()auto_complete |
{ delay: 0, autoFocus: true, minLength: 0 } (object) |
[View here](http://api.jqueryui.com/autocomplete/). |
Any options to over-ride jQuery UI autocomplete plugin. |
| []()formatter |
ampm (string) |
ampm | 24hr | french |
The formatter we want to use |
| []()value |
” (string) |
’13:30:00′ |
Allows you to pass in a 24hr (H:i:s) time to be formatted and displayed in the
field. It’s the same as calling
$(‘#from’).data(‘timeAutocomplete’).setTime(’13:30:00′); |
| []()from_selector |
” (string) |
#from |
You’ll want to use this option on the #to element if you’re using the
‘ampm’ formatter. It applies a level of
“smartness” when dealing with both from/to inputs. If your #from input is 8:00 AM
then the user types in “5” into the #to input, it will give them possible increments
in PM. |
| []()increment |
15 (int) |
5, 10, 15, 30, 60 |
The increment you want the time dropdown to appear in. A 15 minute increment would
produce: [‘7:15 AM’, ‘7:30 AM’, ‘7:45 AM’]. |
| []()start_hour |
0 (int) |
Any number on or between 0 and 24 |
What hour you want start the selectable time list to start at. |
| []()end_hour |
24 (int) |
Any number on or between 0 and 24 |
What hour you want the end of the selectable time list to end at. |
| []()auto_value |
true |
true | false |
If false, it will not inject the current time as a value. Your input will be empty.
|
| []()blur_empty_populate |
true |
true | false |
If we blur from the input field and it’s empty, populate it with our empty default
value (see next line). |
| []()empty |
{
h: ’12’,
m: ’00’,
sep: ‘:’,
postfix: ‘ PM’
} (object) |
|
The default empty value |
}
API
Once you initialize timeAutocomplete() on an element, you have access to methods via data(‘timeAutocomplete’).
| Method |
Args |
Description |
| destroy() |
None |
Completely removes timeAutocomplete plugin from the input |
|
$('my-input').data('timeAutocomplete').destroy();
|
| getTime() |
None |
Gets the time in H:i:s (13:30:00) format. |
|
$('my-input').data('timeAutocomplete').getTime();
|
| setTime(time) |
time: ’13:30:00′ |
Sets the time by passing in a 24hr format. This will be formatted appropriately
before being displayed. NOTE: This should be used instead of .val() |
|
$('my-input').data('timeAutocomplete').setTime('13:30:00');
|
| setFormatter(formatter) |
formatter: ‘ampm’ or ’24hr’ or ‘french’ |
Changes the formatter type on the fly. |
|
$('my-input').data('timeAutocomplete').setFormatter('24hr');
|
Requirements
- jQuery (only tested with 1.10)
- jQuery UI w/ Autocomplete plugin (only tested with 1.10.3)
Browser Support
- IE 7+
- All other good browsers (Firefox, Chrome, Safari)
Download
Download or
Goto Github repo
Jordan Boesch
Jordan is the CEO @ 7shifts. Jordan grew up working in his dad’s restaurant and fell in love with the industry–the rest is history.