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
7shifts is the all-in-one labor platform built for restaurants to simplify employee scheduling and labor management. Easily manage your teams’ schedules, timesheets, communication, tasks, tips and more– all in one place with 7shifts.
Start FREE Trial.
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.