1 | /*! |
---|
2 | * Timepicker Component for Twitter Bootstrap |
---|
3 | * |
---|
4 | * Copyright 2013 Joris de Wit |
---|
5 | * |
---|
6 | * Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors |
---|
7 | * |
---|
8 | * For the full copyright and license information, please view the LICENSE |
---|
9 | * file that was distributed with this source code. |
---|
10 | */ |
---|
11 | (function($, window, document, undefined) { |
---|
12 | 'use strict'; |
---|
13 | |
---|
14 | // TIMEPICKER PUBLIC CLASS DEFINITION |
---|
15 | var Timepicker = function(element, options) { |
---|
16 | this.widget = ''; |
---|
17 | this.$element = $(element); |
---|
18 | this.defaultTime = options.defaultTime; |
---|
19 | this.disableFocus = options.disableFocus; |
---|
20 | this.isOpen = options.isOpen; |
---|
21 | this.minuteStep = options.minuteStep; |
---|
22 | this.modalBackdrop = options.modalBackdrop; |
---|
23 | this.secondStep = options.secondStep; |
---|
24 | this.showInputs = options.showInputs; |
---|
25 | this.showMeridian = options.showMeridian; |
---|
26 | this.showSeconds = options.showSeconds; |
---|
27 | this.template = options.template; |
---|
28 | this.appendWidgetTo = options.appendWidgetTo; |
---|
29 | |
---|
30 | this._init(); |
---|
31 | }; |
---|
32 | |
---|
33 | Timepicker.prototype = { |
---|
34 | |
---|
35 | constructor: Timepicker, |
---|
36 | |
---|
37 | _init: function() { |
---|
38 | var self = this; |
---|
39 | |
---|
40 | if (this.$element.parent().hasClass('input-append') || this.$element.parent().hasClass('input-prepend')) { |
---|
41 | this.$element.parent('.input-append, .input-prepend').find('.add-on').on({ |
---|
42 | 'click.timepicker': $.proxy(this.showWidget, this) |
---|
43 | }); |
---|
44 | this.$element.on({ |
---|
45 | 'focus.timepicker': $.proxy(this.highlightUnit, this), |
---|
46 | 'click.timepicker': $.proxy(this.highlightUnit, this), |
---|
47 | 'keydown.timepicker': $.proxy(this.elementKeydown, this), |
---|
48 | 'blur.timepicker': $.proxy(this.blurElement, this) |
---|
49 | }); |
---|
50 | } else { |
---|
51 | if (this.template) { |
---|
52 | this.$element.on({ |
---|
53 | 'focus.timepicker': $.proxy(this.showWidget, this), |
---|
54 | 'click.timepicker': $.proxy(this.showWidget, this), |
---|
55 | 'blur.timepicker': $.proxy(this.blurElement, this) |
---|
56 | }); |
---|
57 | } else { |
---|
58 | this.$element.on({ |
---|
59 | 'focus.timepicker': $.proxy(this.highlightUnit, this), |
---|
60 | 'click.timepicker': $.proxy(this.highlightUnit, this), |
---|
61 | 'keydown.timepicker': $.proxy(this.elementKeydown, this), |
---|
62 | 'blur.timepicker': $.proxy(this.blurElement, this) |
---|
63 | }); |
---|
64 | } |
---|
65 | } |
---|
66 | |
---|
67 | if (this.template !== false) { |
---|
68 | this.$widget = $(this.getTemplate()).prependTo(this.$element.parents(this.appendWidgetTo)).on('click', $.proxy(this.widgetClick, this)); |
---|
69 | } else { |
---|
70 | this.$widget = false; |
---|
71 | } |
---|
72 | |
---|
73 | if (this.showInputs && this.$widget !== false) { |
---|
74 | this.$widget.find('input').each(function() { |
---|
75 | $(this).on({ |
---|
76 | 'click.timepicker': function() { $(this).select(); }, |
---|
77 | 'keydown.timepicker': $.proxy(self.widgetKeydown, self) |
---|
78 | }); |
---|
79 | }); |
---|
80 | } |
---|
81 | |
---|
82 | this.setDefaultTime(this.defaultTime); |
---|
83 | }, |
---|
84 | |
---|
85 | blurElement: function() { |
---|
86 | this.highlightedUnit = undefined; |
---|
87 | this.updateFromElementVal(); |
---|
88 | }, |
---|
89 | |
---|
90 | decrementHour: function() { |
---|
91 | if (this.showMeridian) { |
---|
92 | if (this.hour === 1) { |
---|
93 | this.hour = 12; |
---|
94 | } else if (this.hour === 12) { |
---|
95 | this.hour--; |
---|
96 | |
---|
97 | return this.toggleMeridian(); |
---|
98 | } else if (this.hour === 0) { |
---|
99 | this.hour = 11; |
---|
100 | |
---|
101 | return this.toggleMeridian(); |
---|
102 | } else { |
---|
103 | this.hour--; |
---|
104 | } |
---|
105 | } else { |
---|
106 | if (this.hour === 0) { |
---|
107 | this.hour = 23; |
---|
108 | } else { |
---|
109 | this.hour--; |
---|
110 | } |
---|
111 | } |
---|
112 | this.update(); |
---|
113 | }, |
---|
114 | |
---|
115 | decrementMinute: function(step) { |
---|
116 | var newVal; |
---|
117 | |
---|
118 | if (step) { |
---|
119 | newVal = this.minute - step; |
---|
120 | } else { |
---|
121 | newVal = this.minute - this.minuteStep; |
---|
122 | } |
---|
123 | |
---|
124 | if (newVal < 0) { |
---|
125 | this.decrementHour(); |
---|
126 | this.minute = newVal + 60; |
---|
127 | } else { |
---|
128 | this.minute = newVal; |
---|
129 | } |
---|
130 | this.update(); |
---|
131 | }, |
---|
132 | |
---|
133 | decrementSecond: function() { |
---|
134 | var newVal = this.second - this.secondStep; |
---|
135 | |
---|
136 | if (newVal < 0) { |
---|
137 | this.decrementMinute(true); |
---|
138 | this.second = newVal + 60; |
---|
139 | } else { |
---|
140 | this.second = newVal; |
---|
141 | } |
---|
142 | this.update(); |
---|
143 | }, |
---|
144 | |
---|
145 | elementKeydown: function(e) { |
---|
146 | switch (e.keyCode) { |
---|
147 | case 9: //tab |
---|
148 | this.updateFromElementVal(); |
---|
149 | |
---|
150 | switch (this.highlightedUnit) { |
---|
151 | case 'hour': |
---|
152 | e.preventDefault(); |
---|
153 | this.highlightNextUnit(); |
---|
154 | break; |
---|
155 | case 'minute': |
---|
156 | if (this.showMeridian || this.showSeconds) { |
---|
157 | e.preventDefault(); |
---|
158 | this.highlightNextUnit(); |
---|
159 | } |
---|
160 | break; |
---|
161 | case 'second': |
---|
162 | if (this.showMeridian) { |
---|
163 | e.preventDefault(); |
---|
164 | this.highlightNextUnit(); |
---|
165 | } |
---|
166 | break; |
---|
167 | } |
---|
168 | break; |
---|
169 | case 27: // escape |
---|
170 | this.updateFromElementVal(); |
---|
171 | break; |
---|
172 | case 37: // left arrow |
---|
173 | e.preventDefault(); |
---|
174 | this.highlightPrevUnit(); |
---|
175 | this.updateFromElementVal(); |
---|
176 | break; |
---|
177 | case 38: // up arrow |
---|
178 | e.preventDefault(); |
---|
179 | switch (this.highlightedUnit) { |
---|
180 | case 'hour': |
---|
181 | this.incrementHour(); |
---|
182 | this.highlightHour(); |
---|
183 | break; |
---|
184 | case 'minute': |
---|
185 | this.incrementMinute(); |
---|
186 | this.highlightMinute(); |
---|
187 | break; |
---|
188 | case 'second': |
---|
189 | this.incrementSecond(); |
---|
190 | this.highlightSecond(); |
---|
191 | break; |
---|
192 | case 'meridian': |
---|
193 | this.toggleMeridian(); |
---|
194 | this.highlightMeridian(); |
---|
195 | break; |
---|
196 | } |
---|
197 | break; |
---|
198 | case 39: // right arrow |
---|
199 | e.preventDefault(); |
---|
200 | this.updateFromElementVal(); |
---|
201 | this.highlightNextUnit(); |
---|
202 | break; |
---|
203 | case 40: // down arrow |
---|
204 | e.preventDefault(); |
---|
205 | switch (this.highlightedUnit) { |
---|
206 | case 'hour': |
---|
207 | this.decrementHour(); |
---|
208 | this.highlightHour(); |
---|
209 | break; |
---|
210 | case 'minute': |
---|
211 | this.decrementMinute(); |
---|
212 | this.highlightMinute(); |
---|
213 | break; |
---|
214 | case 'second': |
---|
215 | this.decrementSecond(); |
---|
216 | this.highlightSecond(); |
---|
217 | break; |
---|
218 | case 'meridian': |
---|
219 | this.toggleMeridian(); |
---|
220 | this.highlightMeridian(); |
---|
221 | break; |
---|
222 | } |
---|
223 | break; |
---|
224 | } |
---|
225 | }, |
---|
226 | |
---|
227 | formatTime: function(hour, minute, second, meridian) { |
---|
228 | hour = hour < 10 ? '0' + hour : hour; |
---|
229 | minute = minute < 10 ? '0' + minute : minute; |
---|
230 | second = second < 10 ? '0' + second : second; |
---|
231 | |
---|
232 | return hour + ':' + minute + (this.showSeconds ? ':' + second : '') + (this.showMeridian ? ' ' + meridian : ''); |
---|
233 | }, |
---|
234 | |
---|
235 | getCursorPosition: function() { |
---|
236 | var input = this.$element.get(0); |
---|
237 | |
---|
238 | if ('selectionStart' in input) {// Standard-compliant browsers |
---|
239 | |
---|
240 | return input.selectionStart; |
---|
241 | } else if (document.selection) {// IE fix |
---|
242 | input.focus(); |
---|
243 | var sel = document.selection.createRange(), |
---|
244 | selLen = document.selection.createRange().text.length; |
---|
245 | |
---|
246 | sel.moveStart('character', - input.value.length); |
---|
247 | |
---|
248 | return sel.text.length - selLen; |
---|
249 | } |
---|
250 | }, |
---|
251 | |
---|
252 | getTemplate: function() { |
---|
253 | var template, |
---|
254 | hourTemplate, |
---|
255 | minuteTemplate, |
---|
256 | secondTemplate, |
---|
257 | meridianTemplate, |
---|
258 | templateContent; |
---|
259 | |
---|
260 | if (this.showInputs) { |
---|
261 | hourTemplate = '<input type="text" name="hour" class="bootstrap-timepicker-hour" maxlength="2"/>'; |
---|
262 | minuteTemplate = '<input type="text" name="minute" class="bootstrap-timepicker-minute" maxlength="2"/>'; |
---|
263 | secondTemplate = '<input type="text" name="second" class="bootstrap-timepicker-second" maxlength="2"/>'; |
---|
264 | meridianTemplate = '<input type="text" name="meridian" class="bootstrap-timepicker-meridian" maxlength="2"/>'; |
---|
265 | } else { |
---|
266 | hourTemplate = '<span class="bootstrap-timepicker-hour"></span>'; |
---|
267 | minuteTemplate = '<span class="bootstrap-timepicker-minute"></span>'; |
---|
268 | secondTemplate = '<span class="bootstrap-timepicker-second"></span>'; |
---|
269 | meridianTemplate = '<span class="bootstrap-timepicker-meridian"></span>'; |
---|
270 | } |
---|
271 | |
---|
272 | templateContent = '<table>'+ |
---|
273 | '<tr>'+ |
---|
274 | '<td><a href="#" data-action="incrementHour"><i class="icon-chevron-up"></i></a></td>'+ |
---|
275 | '<td class="separator"> </td>'+ |
---|
276 | '<td><a href="#" data-action="incrementMinute"><i class="icon-chevron-up"></i></a></td>'+ |
---|
277 | (this.showSeconds ? |
---|
278 | '<td class="separator"> </td>'+ |
---|
279 | '<td><a href="#" data-action="incrementSecond"><i class="icon-chevron-up"></i></a></td>' |
---|
280 | : '') + |
---|
281 | (this.showMeridian ? |
---|
282 | '<td class="separator"> </td>'+ |
---|
283 | '<td class="meridian-column"><a href="#" data-action="toggleMeridian"><i class="icon-chevron-up"></i></a></td>' |
---|
284 | : '') + |
---|
285 | '</tr>'+ |
---|
286 | '<tr>'+ |
---|
287 | '<td>'+ hourTemplate +'</td> '+ |
---|
288 | '<td class="separator">:</td>'+ |
---|
289 | '<td>'+ minuteTemplate +'</td> '+ |
---|
290 | (this.showSeconds ? |
---|
291 | '<td class="separator">:</td>'+ |
---|
292 | '<td>'+ secondTemplate +'</td>' |
---|
293 | : '') + |
---|
294 | (this.showMeridian ? |
---|
295 | '<td class="separator"> </td>'+ |
---|
296 | '<td>'+ meridianTemplate +'</td>' |
---|
297 | : '') + |
---|
298 | '</tr>'+ |
---|
299 | '<tr>'+ |
---|
300 | '<td><a href="#" data-action="decrementHour"><i class="icon-chevron-down"></i></a></td>'+ |
---|
301 | '<td class="separator"></td>'+ |
---|
302 | '<td><a href="#" data-action="decrementMinute"><i class="icon-chevron-down"></i></a></td>'+ |
---|
303 | (this.showSeconds ? |
---|
304 | '<td class="separator"> </td>'+ |
---|
305 | '<td><a href="#" data-action="decrementSecond"><i class="icon-chevron-down"></i></a></td>' |
---|
306 | : '') + |
---|
307 | (this.showMeridian ? |
---|
308 | '<td class="separator"> </td>'+ |
---|
309 | '<td><a href="#" data-action="toggleMeridian"><i class="icon-chevron-down"></i></a></td>' |
---|
310 | : '') + |
---|
311 | '</tr>'+ |
---|
312 | '</table>'; |
---|
313 | |
---|
314 | switch(this.template) { |
---|
315 | case 'modal': |
---|
316 | template = '<div class="bootstrap-timepicker-widget modal hide fade in" data-backdrop="'+ (this.modalBackdrop ? 'true' : 'false') +'">'+ |
---|
317 | '<div class="modal-header">'+ |
---|
318 | '<a href="#" class="close" data-dismiss="modal">Ã</a>'+ |
---|
319 | '<h3>Pick a Time</h3>'+ |
---|
320 | '</div>'+ |
---|
321 | '<div class="modal-content">'+ |
---|
322 | templateContent + |
---|
323 | '</div>'+ |
---|
324 | '<div class="modal-footer">'+ |
---|
325 | '<a href="#" class="btn btn-primary" data-dismiss="modal">OK</a>'+ |
---|
326 | '</div>'+ |
---|
327 | '</div>'; |
---|
328 | break; |
---|
329 | case 'dropdown': |
---|
330 | template = '<div class="bootstrap-timepicker-widget dropdown-menu">'+ templateContent +'</div>'; |
---|
331 | break; |
---|
332 | } |
---|
333 | |
---|
334 | return template; |
---|
335 | }, |
---|
336 | |
---|
337 | getTime: function() { |
---|
338 | return this.formatTime(this.hour, this.minute, this.second, this.meridian); |
---|
339 | }, |
---|
340 | |
---|
341 | hideWidget: function() { |
---|
342 | if (this.isOpen === false) { |
---|
343 | return; |
---|
344 | } |
---|
345 | |
---|
346 | if (this.showInputs) { |
---|
347 | this.updateFromWidgetInputs(); |
---|
348 | } |
---|
349 | |
---|
350 | this.$element.trigger({ |
---|
351 | 'type': 'hide.timepicker', |
---|
352 | 'time': { |
---|
353 | 'value': this.getTime(), |
---|
354 | 'hours': this.hour, |
---|
355 | 'minutes': this.minute, |
---|
356 | 'seconds': this.second, |
---|
357 | 'meridian': this.meridian |
---|
358 | } |
---|
359 | }); |
---|
360 | |
---|
361 | if (this.template === 'modal' && this.$widget.modal) { |
---|
362 | this.$widget.modal('hide'); |
---|
363 | } else { |
---|
364 | this.$widget.removeClass('open'); |
---|
365 | } |
---|
366 | |
---|
367 | $(document).off('mousedown.timepicker'); |
---|
368 | |
---|
369 | this.isOpen = false; |
---|
370 | }, |
---|
371 | |
---|
372 | highlightUnit: function() { |
---|
373 | this.position = this.getCursorPosition(); |
---|
374 | if (this.position >= 0 && this.position <= 2) { |
---|
375 | this.highlightHour(); |
---|
376 | } else if (this.position >= 3 && this.position <= 5) { |
---|
377 | this.highlightMinute(); |
---|
378 | } else if (this.position >= 6 && this.position <= 8) { |
---|
379 | if (this.showSeconds) { |
---|
380 | this.highlightSecond(); |
---|
381 | } else { |
---|
382 | this.highlightMeridian(); |
---|
383 | } |
---|
384 | } else if (this.position >= 9 && this.position <= 11) { |
---|
385 | this.highlightMeridian(); |
---|
386 | } |
---|
387 | }, |
---|
388 | |
---|
389 | highlightNextUnit: function() { |
---|
390 | switch (this.highlightedUnit) { |
---|
391 | case 'hour': |
---|
392 | this.highlightMinute(); |
---|
393 | break; |
---|
394 | case 'minute': |
---|
395 | if (this.showSeconds) { |
---|
396 | this.highlightSecond(); |
---|
397 | } else if (this.showMeridian){ |
---|
398 | this.highlightMeridian(); |
---|
399 | } else { |
---|
400 | this.highlightHour(); |
---|
401 | } |
---|
402 | break; |
---|
403 | case 'second': |
---|
404 | if (this.showMeridian) { |
---|
405 | this.highlightMeridian(); |
---|
406 | } else { |
---|
407 | this.highlightHour(); |
---|
408 | } |
---|
409 | break; |
---|
410 | case 'meridian': |
---|
411 | this.highlightHour(); |
---|
412 | break; |
---|
413 | } |
---|
414 | }, |
---|
415 | |
---|
416 | highlightPrevUnit: function() { |
---|
417 | switch (this.highlightedUnit) { |
---|
418 | case 'hour': |
---|
419 | this.highlightMeridian(); |
---|
420 | break; |
---|
421 | case 'minute': |
---|
422 | this.highlightHour(); |
---|
423 | break; |
---|
424 | case 'second': |
---|
425 | this.highlightMinute(); |
---|
426 | break; |
---|
427 | case 'meridian': |
---|
428 | if (this.showSeconds) { |
---|
429 | this.highlightSecond(); |
---|
430 | } else { |
---|
431 | this.highlightMinute(); |
---|
432 | } |
---|
433 | break; |
---|
434 | } |
---|
435 | }, |
---|
436 | |
---|
437 | highlightHour: function() { |
---|
438 | var $element = this.$element.get(0); |
---|
439 | |
---|
440 | this.highlightedUnit = 'hour'; |
---|
441 | |
---|
442 | if ($element.setSelectionRange) { |
---|
443 | setTimeout(function() { |
---|
444 | $element.setSelectionRange(0,2); |
---|
445 | }, 0); |
---|
446 | } |
---|
447 | }, |
---|
448 | |
---|
449 | highlightMinute: function() { |
---|
450 | var $element = this.$element.get(0); |
---|
451 | |
---|
452 | this.highlightedUnit = 'minute'; |
---|
453 | |
---|
454 | if ($element.setSelectionRange) { |
---|
455 | setTimeout(function() { |
---|
456 | $element.setSelectionRange(3,5); |
---|
457 | }, 0); |
---|
458 | } |
---|
459 | }, |
---|
460 | |
---|
461 | highlightSecond: function() { |
---|
462 | var $element = this.$element.get(0); |
---|
463 | |
---|
464 | this.highlightedUnit = 'second'; |
---|
465 | |
---|
466 | if ($element.setSelectionRange) { |
---|
467 | setTimeout(function() { |
---|
468 | $element.setSelectionRange(6,8); |
---|
469 | }, 0); |
---|
470 | } |
---|
471 | }, |
---|
472 | |
---|
473 | highlightMeridian: function() { |
---|
474 | var $element = this.$element.get(0); |
---|
475 | |
---|
476 | this.highlightedUnit = 'meridian'; |
---|
477 | |
---|
478 | if ($element.setSelectionRange) { |
---|
479 | if (this.showSeconds) { |
---|
480 | setTimeout(function() { |
---|
481 | $element.setSelectionRange(9,11); |
---|
482 | }, 0); |
---|
483 | } else { |
---|
484 | setTimeout(function() { |
---|
485 | $element.setSelectionRange(6,8); |
---|
486 | }, 0); |
---|
487 | } |
---|
488 | } |
---|
489 | }, |
---|
490 | |
---|
491 | incrementHour: function() { |
---|
492 | if (this.showMeridian) { |
---|
493 | if (this.hour === 11) { |
---|
494 | this.hour++; |
---|
495 | return this.toggleMeridian(); |
---|
496 | } else if (this.hour === 12) { |
---|
497 | this.hour = 0; |
---|
498 | } |
---|
499 | } |
---|
500 | if (this.hour === 23) { |
---|
501 | this.hour = 0; |
---|
502 | |
---|
503 | return; |
---|
504 | } |
---|
505 | this.hour++; |
---|
506 | this.update(); |
---|
507 | }, |
---|
508 | |
---|
509 | incrementMinute: function(step) { |
---|
510 | var newVal; |
---|
511 | |
---|
512 | if (step) { |
---|
513 | newVal = this.minute + step; |
---|
514 | } else { |
---|
515 | newVal = this.minute + this.minuteStep - (this.minute % this.minuteStep); |
---|
516 | } |
---|
517 | |
---|
518 | if (newVal > 59) { |
---|
519 | this.incrementHour(); |
---|
520 | this.minute = newVal - 60; |
---|
521 | } else { |
---|
522 | this.minute = newVal; |
---|
523 | } |
---|
524 | this.update(); |
---|
525 | }, |
---|
526 | |
---|
527 | incrementSecond: function() { |
---|
528 | var newVal = this.second + this.secondStep - (this.second % this.secondStep); |
---|
529 | |
---|
530 | if (newVal > 59) { |
---|
531 | this.incrementMinute(true); |
---|
532 | this.second = newVal - 60; |
---|
533 | } else { |
---|
534 | this.second = newVal; |
---|
535 | } |
---|
536 | this.update(); |
---|
537 | }, |
---|
538 | |
---|
539 | remove: function() { |
---|
540 | $('document').off('.timepicker'); |
---|
541 | if (this.$widget) { |
---|
542 | this.$widget.remove(); |
---|
543 | } |
---|
544 | delete this.$element.data().timepicker; |
---|
545 | }, |
---|
546 | |
---|
547 | setDefaultTime: function(defaultTime){ |
---|
548 | if (!this.$element.val()) { |
---|
549 | if (defaultTime === 'current') { |
---|
550 | var dTime = new Date(), |
---|
551 | hours = dTime.getHours(), |
---|
552 | minutes = Math.floor(dTime.getMinutes() / this.minuteStep) * this.minuteStep, |
---|
553 | seconds = Math.floor(dTime.getSeconds() / this.secondStep) * this.secondStep, |
---|
554 | meridian = 'AM'; |
---|
555 | |
---|
556 | if (this.showMeridian) { |
---|
557 | if (hours === 0) { |
---|
558 | hours = 12; |
---|
559 | } else if (hours >= 12) { |
---|
560 | if (hours > 12) { |
---|
561 | hours = hours - 12; |
---|
562 | } |
---|
563 | meridian = 'PM'; |
---|
564 | } else { |
---|
565 | meridian = 'AM'; |
---|
566 | } |
---|
567 | } |
---|
568 | |
---|
569 | this.hour = hours; |
---|
570 | this.minute = minutes; |
---|
571 | this.second = seconds; |
---|
572 | this.meridian = meridian; |
---|
573 | |
---|
574 | this.update(); |
---|
575 | |
---|
576 | } else if (defaultTime === false) { |
---|
577 | this.hour = 0; |
---|
578 | this.minute = 0; |
---|
579 | this.second = 0; |
---|
580 | this.meridian = 'AM'; |
---|
581 | } else { |
---|
582 | this.setTime(defaultTime); |
---|
583 | } |
---|
584 | } else { |
---|
585 | this.updateFromElementVal(); |
---|
586 | } |
---|
587 | }, |
---|
588 | |
---|
589 | setTime: function(time) { |
---|
590 | var arr, |
---|
591 | timeArray; |
---|
592 | |
---|
593 | if (this.showMeridian) { |
---|
594 | arr = time.split(' '); |
---|
595 | timeArray = arr[0].split(':'); |
---|
596 | this.meridian = arr[1]; |
---|
597 | } else { |
---|
598 | timeArray = time.split(':'); |
---|
599 | } |
---|
600 | |
---|
601 | this.hour = parseInt(timeArray[0], 10); |
---|
602 | this.minute = parseInt(timeArray[1], 10); |
---|
603 | this.second = parseInt(timeArray[2], 10); |
---|
604 | |
---|
605 | if (isNaN(this.hour)) { |
---|
606 | this.hour = 0; |
---|
607 | } |
---|
608 | if (isNaN(this.minute)) { |
---|
609 | this.minute = 0; |
---|
610 | } |
---|
611 | |
---|
612 | if (this.showMeridian) { |
---|
613 | if (this.hour > 12) { |
---|
614 | this.hour = 12; |
---|
615 | } else if (this.hour < 1) { |
---|
616 | this.hour = 12; |
---|
617 | } |
---|
618 | |
---|
619 | if (this.meridian === 'am' || this.meridian === 'a') { |
---|
620 | this.meridian = 'AM'; |
---|
621 | } else if (this.meridian === 'pm' || this.meridian === 'p') { |
---|
622 | this.meridian = 'PM'; |
---|
623 | } |
---|
624 | |
---|
625 | if (this.meridian !== 'AM' && this.meridian !== 'PM') { |
---|
626 | this.meridian = 'AM'; |
---|
627 | } |
---|
628 | } else { |
---|
629 | if (this.hour >= 24) { |
---|
630 | this.hour = 23; |
---|
631 | } else if (this.hour < 0) { |
---|
632 | this.hour = 0; |
---|
633 | } |
---|
634 | } |
---|
635 | |
---|
636 | if (this.minute < 0) { |
---|
637 | this.minute = 0; |
---|
638 | } else if (this.minute >= 60) { |
---|
639 | this.minute = 59; |
---|
640 | } |
---|
641 | |
---|
642 | if (this.showSeconds) { |
---|
643 | if (isNaN(this.second)) { |
---|
644 | this.second = 0; |
---|
645 | } else if (this.second < 0) { |
---|
646 | this.second = 0; |
---|
647 | } else if (this.second >= 60) { |
---|
648 | this.second = 59; |
---|
649 | } |
---|
650 | } |
---|
651 | |
---|
652 | this.update(); |
---|
653 | }, |
---|
654 | |
---|
655 | showWidget: function() { |
---|
656 | if (this.isOpen) { |
---|
657 | return; |
---|
658 | } |
---|
659 | |
---|
660 | if (this.$element.is(':disabled')) { |
---|
661 | return; |
---|
662 | } |
---|
663 | |
---|
664 | var self = this; |
---|
665 | $(document).on('mousedown.timepicker', function (e) { |
---|
666 | // Clicked outside the timepicker, hide it |
---|
667 | if ($(e.target).closest('.bootstrap-timepicker-widget').length === 0) { |
---|
668 | self.hideWidget(); |
---|
669 | } |
---|
670 | }); |
---|
671 | |
---|
672 | this.$element.trigger({ |
---|
673 | 'type': 'show.timepicker', |
---|
674 | 'time': { |
---|
675 | 'value': this.getTime(), |
---|
676 | 'hours': this.hour, |
---|
677 | 'minutes': this.minute, |
---|
678 | 'seconds': this.second, |
---|
679 | 'meridian': this.meridian |
---|
680 | } |
---|
681 | }); |
---|
682 | |
---|
683 | if (this.disableFocus) { |
---|
684 | this.$element.blur(); |
---|
685 | } |
---|
686 | |
---|
687 | this.updateFromElementVal(); |
---|
688 | |
---|
689 | if (this.template === 'modal' && this.$widget.modal) { |
---|
690 | this.$widget.modal('show').on('hidden', $.proxy(this.hideWidget, this)); |
---|
691 | } else { |
---|
692 | if (this.isOpen === false) { |
---|
693 | this.$widget.addClass('open'); |
---|
694 | } |
---|
695 | } |
---|
696 | |
---|
697 | this.isOpen = true; |
---|
698 | }, |
---|
699 | |
---|
700 | toggleMeridian: function() { |
---|
701 | this.meridian = this.meridian === 'AM' ? 'PM' : 'AM'; |
---|
702 | this.update(); |
---|
703 | }, |
---|
704 | |
---|
705 | update: function() { |
---|
706 | this.$element.trigger({ |
---|
707 | 'type': 'changeTime.timepicker', |
---|
708 | 'time': { |
---|
709 | 'value': this.getTime(), |
---|
710 | 'hours': this.hour, |
---|
711 | 'minutes': this.minute, |
---|
712 | 'seconds': this.second, |
---|
713 | 'meridian': this.meridian |
---|
714 | } |
---|
715 | }); |
---|
716 | |
---|
717 | this.updateElement(); |
---|
718 | this.updateWidget(); |
---|
719 | }, |
---|
720 | |
---|
721 | updateElement: function() { |
---|
722 | this.$element.val(this.getTime()).change(); |
---|
723 | }, |
---|
724 | |
---|
725 | updateFromElementVal: function() { |
---|
726 | var val = this.$element.val(); |
---|
727 | |
---|
728 | if (val) { |
---|
729 | this.setTime(val); |
---|
730 | } |
---|
731 | }, |
---|
732 | |
---|
733 | updateWidget: function() { |
---|
734 | if (this.$widget === false) { |
---|
735 | return; |
---|
736 | } |
---|
737 | |
---|
738 | var hour = this.hour < 10 ? '0' + this.hour : this.hour, |
---|
739 | minute = this.minute < 10 ? '0' + this.minute : this.minute, |
---|
740 | second = this.second < 10 ? '0' + this.second : this.second; |
---|
741 | |
---|
742 | if (this.showInputs) { |
---|
743 | this.$widget.find('input.bootstrap-timepicker-hour').val(hour); |
---|
744 | this.$widget.find('input.bootstrap-timepicker-minute').val(minute); |
---|
745 | |
---|
746 | if (this.showSeconds) { |
---|
747 | this.$widget.find('input.bootstrap-timepicker-second').val(second); |
---|
748 | } |
---|
749 | if (this.showMeridian) { |
---|
750 | this.$widget.find('input.bootstrap-timepicker-meridian').val(this.meridian); |
---|
751 | } |
---|
752 | } else { |
---|
753 | this.$widget.find('span.bootstrap-timepicker-hour').text(hour); |
---|
754 | this.$widget.find('span.bootstrap-timepicker-minute').text(minute); |
---|
755 | |
---|
756 | if (this.showSeconds) { |
---|
757 | this.$widget.find('span.bootstrap-timepicker-second').text(second); |
---|
758 | } |
---|
759 | if (this.showMeridian) { |
---|
760 | this.$widget.find('span.bootstrap-timepicker-meridian').text(this.meridian); |
---|
761 | } |
---|
762 | } |
---|
763 | }, |
---|
764 | |
---|
765 | updateFromWidgetInputs: function() { |
---|
766 | if (this.$widget === false) { |
---|
767 | return; |
---|
768 | } |
---|
769 | var time = $('input.bootstrap-timepicker-hour', this.$widget).val() + ':' + |
---|
770 | $('input.bootstrap-timepicker-minute', this.$widget).val() + |
---|
771 | (this.showSeconds ? ':' + $('input.bootstrap-timepicker-second', this.$widget).val() : '') + |
---|
772 | (this.showMeridian ? ' ' + $('input.bootstrap-timepicker-meridian', this.$widget).val() : ''); |
---|
773 | |
---|
774 | this.setTime(time); |
---|
775 | }, |
---|
776 | |
---|
777 | widgetClick: function(e) { |
---|
778 | e.stopPropagation(); |
---|
779 | e.preventDefault(); |
---|
780 | |
---|
781 | var action = $(e.target).closest('a').data('action'); |
---|
782 | if (action) { |
---|
783 | this[action](); |
---|
784 | } |
---|
785 | }, |
---|
786 | |
---|
787 | widgetKeydown: function(e) { |
---|
788 | var $input = $(e.target).closest('input'), |
---|
789 | name = $input.attr('name'); |
---|
790 | |
---|
791 | switch (e.keyCode) { |
---|
792 | case 9: //tab |
---|
793 | if (this.showMeridian) { |
---|
794 | if (name === 'meridian') { |
---|
795 | return this.hideWidget(); |
---|
796 | } |
---|
797 | } else { |
---|
798 | if (this.showSeconds) { |
---|
799 | if (name === 'second') { |
---|
800 | return this.hideWidget(); |
---|
801 | } |
---|
802 | } else { |
---|
803 | if (name === 'minute') { |
---|
804 | return this.hideWidget(); |
---|
805 | } |
---|
806 | } |
---|
807 | } |
---|
808 | |
---|
809 | this.updateFromWidgetInputs(); |
---|
810 | break; |
---|
811 | case 27: // escape |
---|
812 | this.hideWidget(); |
---|
813 | break; |
---|
814 | case 38: // up arrow |
---|
815 | e.preventDefault(); |
---|
816 | switch (name) { |
---|
817 | case 'hour': |
---|
818 | this.incrementHour(); |
---|
819 | break; |
---|
820 | case 'minute': |
---|
821 | this.incrementMinute(); |
---|
822 | break; |
---|
823 | case 'second': |
---|
824 | this.incrementSecond(); |
---|
825 | break; |
---|
826 | case 'meridian': |
---|
827 | this.toggleMeridian(); |
---|
828 | break; |
---|
829 | } |
---|
830 | break; |
---|
831 | case 40: // down arrow |
---|
832 | e.preventDefault(); |
---|
833 | switch (name) { |
---|
834 | case 'hour': |
---|
835 | this.decrementHour(); |
---|
836 | break; |
---|
837 | case 'minute': |
---|
838 | this.decrementMinute(); |
---|
839 | break; |
---|
840 | case 'second': |
---|
841 | this.decrementSecond(); |
---|
842 | break; |
---|
843 | case 'meridian': |
---|
844 | this.toggleMeridian(); |
---|
845 | break; |
---|
846 | } |
---|
847 | break; |
---|
848 | } |
---|
849 | } |
---|
850 | }; |
---|
851 | |
---|
852 | |
---|
853 | //TIMEPICKER PLUGIN DEFINITION |
---|
854 | $.fn.timepicker = function(option) { |
---|
855 | var args = Array.apply(null, arguments); |
---|
856 | args.shift(); |
---|
857 | return this.each(function() { |
---|
858 | var $this = $(this), |
---|
859 | data = $this.data('timepicker'), |
---|
860 | options = typeof option === 'object' && option; |
---|
861 | |
---|
862 | if (!data) { |
---|
863 | $this.data('timepicker', (data = new Timepicker(this, $.extend({}, $.fn.timepicker.defaults, options, $(this).data())))); |
---|
864 | } |
---|
865 | |
---|
866 | if (typeof option === 'string') { |
---|
867 | data[option].apply(data, args); |
---|
868 | } |
---|
869 | }); |
---|
870 | }; |
---|
871 | |
---|
872 | $.fn.timepicker.defaults = { |
---|
873 | defaultTime: 'current', |
---|
874 | disableFocus: false, |
---|
875 | isOpen: false, |
---|
876 | minuteStep: 15, |
---|
877 | modalBackdrop: false, |
---|
878 | secondStep: 15, |
---|
879 | showSeconds: false, |
---|
880 | showInputs: true, |
---|
881 | showMeridian: true, |
---|
882 | template: 'dropdown', |
---|
883 | appendWidgetTo: '.bootstrap-timepicker' |
---|
884 | }; |
---|
885 | |
---|
886 | $.fn.timepicker.Constructor = Timepicker; |
---|
887 | |
---|
888 | })(jQuery, window, document); |
---|