From c94fb32c7a3c28b18a27460aa2447eeec1fac1de Mon Sep 17 00:00:00 2001 From: Pascal Szewczyk Date: Mon, 18 Jul 2016 23:23:54 +0200 Subject: uikit added --- js/components/timepicker.js | 192 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 192 insertions(+) create mode 100755 js/components/timepicker.js (limited to 'js/components/timepicker.js') diff --git a/js/components/timepicker.js b/js/components/timepicker.js new file mode 100755 index 0000000..1b7a808 --- /dev/null +++ b/js/components/timepicker.js @@ -0,0 +1,192 @@ +/*! UIkit 2.26.4 | 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 = ''; + + this.options.source = function(release) { + release(times[$this.options.format] || times['12h']); + }; + + if (this.element.is('input')) { + this.element.wrap('
'); + 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 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; + } + +}); -- cgit v1.2.3