/*! UIkit 2.25.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ (function(addon) { var component; if (window.UIkit) { component = addon(UIkit); } if (typeof define == "function" && define.amd) { define("uikit-timepicker", ["uikit"], function(){ return component || addon(UIkit); }); } })(function(UI){ "use strict"; UI.component('timepicker', { defaults: { format : '24h', delay : 0, start : 0, end : 24 }, boot: function() { // init code UI.$html.on("focus.timepicker.uikit", "[data-uk-timepicker]", function(e) { var ele = UI.$(this); if (!ele.data("timepicker")) { var obj = UI.timepicker(ele, UI.Utils.options(ele.attr("data-uk-timepicker"))); setTimeout(function(){ obj.autocomplete.input.focus(); }, 40); } }); }, init: function() { var $this = this, times = getTimeRange(this.options.start, this.options.end), container; this.options.minLength = 0; this.options.template = '<ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results">{{~items}}<li data-value="{{$item.value}}"><a>{{$item.value}}</a></li>{{/items}}</ul>'; this.options.source = function(release) { release(times[$this.options.format] || times['12h']); }; if (this.element.is('input')) { this.element.wrap('<div class="uk-autocomplete"></div>'); container = this.element.parent(); } else { container = this.element.addClass('uk-autocomplete'); } this.autocomplete = UI.autocomplete(container, this.options); this.autocomplete.dropdown.addClass('uk-dropdown-small uk-dropdown-scrollable'); this.autocomplete.on('show.uk.autocomplete', function() { var selected = $this.autocomplete.dropdown.find('[data-value="'+$this.autocomplete.input.val()+'"]'); setTimeout(function(){ $this.autocomplete.pick(selected, true); }, 10); }); this.autocomplete.input.on('focus', function(){ $this.autocomplete.value = Math.random(); $this.autocomplete.triggercomplete(); }).on('blur', UI.Utils.debounce(function() { $this.checkTime(); }, 100)); this.element.data("timepicker", this); }, checkTime: function() { var arr, timeArray, meridian = 'AM', hour, minute, time = this.autocomplete.input.val(); if (this.options.format == '12h') { arr = time.split(' '); timeArray = arr[0].split(':'); meridian = arr[1]; } else { timeArray = time.split(':'); } hour = parseInt(timeArray[0], 10); minute = parseInt(timeArray[1], 10); if (isNaN(hour)) hour = 0; if (isNaN(minute)) minute = 0; if (this.options.format == '12h') { if (hour > 12) { hour = 12; } else if (hour < 0) { hour = 12; } if (meridian === 'am' || meridian === 'a') { meridian = 'AM'; } else if (meridian === 'pm' || meridian === 'p') { meridian = 'PM'; } if (meridian !== 'AM' && meridian !== 'PM') { meridian = 'AM'; } } else { if (hour >= 24) { hour = 23; } else if (hour < 0) { hour = 0; } } if (minute < 0) { minute = 0; } else if (minute >= 60) { minute = 0; } this.autocomplete.input.val(this.formatTime(hour, minute, meridian)).trigger('change'); }, formatTime: function(hour, minute, meridian) { hour = hour < 10 ? '0' + hour : hour; minute = minute < 10 ? '0' + minute : minute; return hour + ':' + minute + (this.options.format == '12h' ? ' ' + meridian : ''); } }); // helper function getTimeRange(start, end) { start = start || 0; end = end || 24; var times = {'12h':[], '24h':[]}, i, h; for (i = start, h=''; i<end; i++) { h = ''+i; if (i<10) h = '0'+h; times['24h'].push({value: (h+':00')}); times['24h'].push({value: (h+':30')}); if (i === 0) { h = 12; times['12h'].push({value: (h+':00 AM')}); times['12h'].push({value: (h+':30 AM')}); } if (i > 0 && i<13 && i!==12) { times['12h'].push({value: (h+':00 AM')}); times['12h'].push({value: (h+':30 AM')}); } if (i >= 12) { h = h-12; if (h === 0) h = 12; if (h < 10) h = '0'+String(h); times['12h'].push({value: (h+':00 PM')}); times['12h'].push({value: (h+':30 PM')}); } } return times; } });