23 |
24 |
jQuery timeAutocomplete Plugin by 7shifts.com
25 |
26 |
What is this?
27 |
28 |
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.
29 |
30 |
Some things that make is super duper fantastic:
31 |
32 | Start time defaults to users current time (within your set increment
33 | 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.
34 | 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.
35 | Fetch time in H:i:s format (13:30:00) for comparing/validating. Done so by calling $(input).data('timeAutocomplete').getTime()
36 | Uses placeholder attribute if detected, if not, it uses our own placeholder text.
37 | Oh, and it's tested :) - see tests/index.html to run tests
38 |
39 |
40 |
Basic usage
41 |
$('#basic-example').timeAutocomplete();
42 |
43 |
44 |
45 |
Advanced usage #1
46 |
Injecting an existing value and using 24hr as the formatter.
47 |
$('#from-24hr').timeAutocomplete({
48 | formatter: '24hr',
49 | value: '07:00:00'
50 | });
51 |
52 | $('#to-24hr').timeAutocomplete({
53 | formatter: '24hr',
54 | value: '09:30:00'
55 | });
56 |
57 | From
58 | To
Show getTime() value (H:i:s format)
59 |
60 |
61 |
Advanced usage #2
62 |
Using a 'from' and 'to' input. We use a 'from_selector' argument in the set of options on the 'to' field. This makes the time autocomplete aware of the time in the other
63 | field. If the 'from' field is '8:00 AM' and we start typing into the 'to' field with '4', it will show us a list of 4 'PM' instead of 4 'AM' options.
64 |
$('#from-ampm').timeAutocomplete({
65 | increment: 5,
66 | value: '08:00:00'
67 | });
68 |
69 | $('#to-ampm').timeAutocomplete({
70 | increment: 5,
71 | from_selector: '#from-ampm',
72 | value: '17:30:00' // likely populated from your database.
73 | });
74 |
75 | From
76 | To
Show getTime() value (H:i:s format)
77 |
78 |
Advanced usage #3
79 |
80 |
$('#from-french').timeAutocomplete({
81 | formatter: 'french'
82 | });
83 |
84 | $('#to-french').timeAutocomplete({
85 | formatter: 'french',
86 | value: '17:00:00'
87 | });
88 |
89 | From
90 | To
Show getTime() value (H:i:s format)
91 |
92 |
Initialization options
93 |
Below is a set of options you can pass when you call $('#my-input').timeAutocomplete(options);
94 |
95 |
options = {
96 |
97 |
98 |
99 | Option key
100 | Default value
101 | Possible values
102 | Description
103 |
104 |
105 |
106 |
107 | { delay: 0, autoFocus: true, minLength: 0 } (object)
109 | View here .Any options to over-ride jQuery UI autocomplete plugin.
111 |
112 |
113 | ampm (string)
115 | ampm | 24hr | french
116 | The formatter we want to use
117 |
118 |
119 | '' (string)
121 | '13:30:00'
122 | 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');
123 |
124 |
125 | '' (string)
127 | #from
128 | You'll want to use this option on the #to element if you're using the
129 | 'ampm' formatter. It applies a level of
130 | "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.
131 |
132 |
133 | 15 (int)
135 | 5, 10, 15, 30, 60
136 |
137 | 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'].
138 |
139 |
140 |
141 | 0 (int)
143 | Any number on or between 0 and 24
144 | What hour you want start the selectable time list to start at.
145 |
146 |
147 | 24 (int)
149 | Any number on or between 0 and 24
150 | What hour you want the end of the selectable time list to end at.
151 |
152 |
153 | true
155 | true | false
156 | If we blur from the input field and it's empty, populate it with our empty default value (see next line).
157 |
158 |
159 | true
161 | true | false
162 | If false, it will not inject the current time as a value. Your input will be empty.
163 |
164 |
165 | {
167 | h: '12',
168 | m: '00',
169 | sep: ':',
170 | postfix: ' PM'
171 | } (object)
172 | The default empty value
174 |
175 |
176 |
177 |
178 |
}
179 |
180 |
API
181 |
Once you initialize timeAutocomplete() on an element, you have access to methods via data('timeAutocomplete').
182 |
183 |
184 |
185 | Method
186 | Arguments
187 | Description
188 |
189 |
190 |
191 |
192 |
193 | destroy() None
195 | Completely removes timeAutocomplete plugin from the input
196 |
197 |
198 | $('#my-input').data('timeAutocomplete').destroy();
200 |
201 | getTime() None
203 | Gets the time in H:i:s (13:30:00) format.
204 |
205 |
206 | $('#my-input').data('timeAutocomplete').getTime();
208 |
209 | setTime(time) time: '13:30:00'
211 | Sets the time by passing in a 24hr format. This will be formatted appropriately before being displayed.
212 |
213 |
214 | $('#my-input').data('timeAutocomplete').setTime('13:30:00');
216 |
217 | setFormatter(formatter) formatter: 'ampm' or '24hr' or 'french'
219 | Changes the formatter type on the fly.
220 |
221 |
222 | $('#my-input').data('timeAutocomplete').setFormatter('24hr');
224 |
225 |
226 |
227 |
228 |
Requirements
229 |
230 | jQuery (only tested with 1.9)
231 | jQuery UI w/ Autocomplete plugin (only tested with 1.10.2)
232 |
233 |
234 |
235 |
