https://aperantogalazio-mykonos.com/wp-content/themes/grandrestaurant/functions/jquery.timepicker.js

1/*
2 * A time picker for jQuery
3 *
4 * Dual licensed under the MIT and GPL licenses.
5 * Copyright (c) 2009 Anders Fajerson
6 * @name     timePicker
7 * @author   Anders Fajerson (http://perifer.se)
8 * @example  $("#mytime").timePicker();
9 * @example  $("#mytime").timePicker({step:30, startTime:"15:00", endTime:"18:00"});
10 *
11 * Based on timePicker by Sam Collet (http://www.texotela.co.uk/code/jquery/timepicker/)
12 *
13 * Options:
14 *   step: # of minutes to step the time by
15 *   startTime: beginning of the range of acceptable times
16 *   endTime: end of the range of acceptable times
17 *   separator: separator string to use between hours and minutes (e.g. ':')
18 *   show24Hours: use a 24-hour scheme
19 */
20
21(function($){
22  $.fn.timePicker = function(options) {
23    // Build main options before element iteration
24    var settings = $.extend({}, $.fn.timePicker.defaults, options);
25
26    return this.each(function() {
27      $.timePicker(this, settings);
28    });
29  };
30
31  $.timePicker = function (elm, settings) {
32    var e = $(elm)[0];
33    return e.timePicker || (e.timePicker = new jQuery._timePicker(e, settings));
34  };
35
36  $.timePicker.version = '0.3';
37
38  $._timePicker = function(elm, settings) {
39
40    var tpOver = false;
41    var keyDown = false;
42    var startTime = timeToDate(settings.startTime, settings);
43    var endTime = timeToDate(settings.endTime, settings);
44    var selectedClass = "selected";
45    var selectedSelector = "li." + selectedClass;
46
47    $(elm).attr('autocomplete', 'OFF'); // Disable browser autocomplete
48
49    var times = [];
50    var time = new Date(startTime); // Create a new date object.
51    while(time <= endTime) {
52      times[times.length] = formatTime(time, settings);
53      time = new Date(time.setMinutes(time.getMinutes() + settings.step));
54    }
55
56    var $tpDiv = $('<div class="time-picker'+ (settings.show24Hours ? '' : ' time-picker-12hours') +'"></div>');
57    var $tpList = $('<ul></ul>');
58
59    // Build the list.
60    for(var i = 0; i < times.length; i++) {
61      $tpList.append("<li>" + times[i] + "</li>");
62    }
63    $tpDiv.append($tpList);
64    // Append the timPicker to the body and position it.
65    $tpDiv.appendTo('body').hide();
66
67    // Store the mouse state, used by the blur event. Use mouseover instead of
68    // mousedown since Opera fires blur before mousedown.
69    $tpDiv.mouseover(function() {
70      tpOver = true;
71    }).mouseout(function() {
72      tpOver = false;
73    });
74
75    $("li", $tpList).mouseover(function() {
76      if (!keyDown) {
77        $(selectedSelector, $tpDiv).removeClass(selectedClass);
78        $(this).addClass(selectedClass);
79      }
80    }).mousedown(function() {
81       tpOver = true;
82    }).click(function() {
83      setTimeVal(elm, this, $tpDiv, settings);
84      tpOver = false;
85    });
86
87    var showPicker = function() {
88      if ($tpDiv.is(":visible")) {
89        return false;
90      }
91      $("li", $tpDiv).removeClass(selectedClass);
92
93      // Position
94      var elmOffset = $(elm).offset();
95      $tpDiv.css({'top':elmOffset.top + elm.offsetHeight, 'left':elmOffset.left});
96
97      // Show picker. This has to be done before scrollTop is set since that
98      // can't be done on hidden elements.
99      $tpDiv.show();
100
101      // Try to find a time in the list that matches the entered time.
102      var time = elm.value ? timeStringToDate(elm.value, settings) : startTime;
103      var startMin = startTime.getHours() * 60 + startTime.getMinutes();
104      var min = (time.getHours() * 60 + time.getMinutes()) - startMin;
105      var steps = Math.round(min / settings.step);
106      var roundTime = normaliseTime(new Date(0, 0, 0, 0, (steps * settings.step + startMin), 0));
107      roundTime = (startTime < roundTime && roundTime <= endTime) ? roundTime : startTime;
108      var $matchedTime = $("li:contains(" + formatTime(roundTime, settings) + ")", $tpDiv);
109
110      if ($matchedTime.length) {
111        $matchedTime.addClass(selectedClass);
112        // Scroll to matched time.
113        $tpDiv[0].scrollTop = $matchedTime[0].offsetTop;
114      }
115      return true;
116    };
117    // Attach to click as well as focus so timePicker can be shown again when
118    // clicking on the input when it already has focus.
119    $(elm).focus(showPicker).click(showPicker);
120    // Hide timepicker on blur
121    $(elm).blur(function() {
122      if (!tpOver) {
123        $tpDiv.hide();
124      }
125    });
126    // Keypress doesn't repeat on Safari for non-text keys.
127    // Keydown doesn't repeat on Firefox and Opera on Mac.

128    // Using kepress for Opera and Firefox and keydown for the rest seems to
129    // work with up/down/enter/esc.
130    var event = 'keydown';
131    $(elm)[event](function(e) {
132      var $selected;
133      keyDown = true;
134      var top = $tpDiv[0].scrollTop;
135      switch (e.keyCode) {
136        case 38: // Up arrow.
137          // Just show picker if it's hidden.
138          if (showPicker()) {
139            return false;
140          };
141          $selected = $(selectedSelector, $tpList);
142          var prev = $selected.prev().addClass(selectedClass)[0];
143          if (prev) {
144            $selected.removeClass(selectedClass);
145            // Scroll item into view.
146            if (prev.offsetTop < top) {
147              $tpDiv[0].scrollTop = top - prev.offsetHeight;
148            }
149          }
150          else {
151            // Loop to next item.
152            $selected.removeClass(selectedClass);
153            prev = $("li:last", $tpList).addClass(selectedClass)[0];
154            $tpDiv[0].scrollTop = prev.offsetTop - prev.offsetHeight;
155          }
156          return false;
157          break;
158        case 40: // Down arrow, similar in behaviour to up arrow.
159          if (showPicker()) {
160            return false;
161          };
162          $selected = $(selectedSelector, $tpList);
163          var next = $selected.next().addClass(selectedClass)[0];
164          if (next) {
165            $selected.removeClass(selectedClass);
166            if (next.offsetTop + next.offsetHeight > top + $tpDiv[0].offsetHeight) {
167              $tpDiv[0].scrollTop = top + next.offsetHeight;
168            }
169          }
170          else {
171            $selected.removeClass(selectedClass);
172            next = $("li:first", $tpList).addClass(selectedClass)[0];
173            $tpDiv[0].scrollTop = 0;
174          }
175          return false;
176          break;
177        case 13: // Enter
178          if ($tpDiv.is(":visible")) {
179            var sel = $(selectedSelector, $tpList)[0];
180            setTimeVal(elm, sel, $tpDiv, settings);
181          }
182          return false;
183          break;
184        case 27: // Esc
185          $tpDiv.hide();
186          return false;
187          break;
188      }
189      return true;
190    });
191    $(elm).keyup(function(e) {
192      keyDown = false;
193    });
194    // Helper function to get an inputs current time as Date object.
195    // Returns a Date object.
196    this.getTime = function() {
197      return timeStringToDate(elm.value, settings);
198    };
199    // Helper function to set a time input.
200    // Takes a Date object or string.
201    this.setTime = function(time) {
202      elm.value = formatTime(timeToDate(time, settings), settings);
203      // Trigger element's change events.
204      $(elm).change();
205    };
206
207  }; // End fn;
208
209  // Plugin defaults.
210  $.fn.timePicker.defaults = {
211    step:30,
212    startTime: new Date(0, 0, 0, 0, 0, 0),
213    endTime: new Date(0, 0, 0, 23, 30, 0),
214    separator: ':',
215    show24Hours: true
216  };
217
218  // Private functions.
219
220  function setTimeVal(elm, sel, $tpDiv, settings) {
221    // Update input field
222    elm.value = $(sel).text();
223    // Trigger element's change events.
224    $(elm).change();
225    // Keep focus for all but IE (which doesn't like it)
226    // Hide picker
227    $tpDiv.hide();
228  }
229
230  function formatTime(time, settings) {
231    var h = time.getHours();
232    var hours = settings.show24Hours ? h : (((h + 11) % 12) + 1);
233    var minutes = time.getMinutes();
234    return formatNumber(hours) + settings.separator + formatNumber(minutes) + (settings.show24Hours ? '' : ((h < 12) ? ' AM' : ' PM'));
235  }
236
237  function formatNumber(value) {
238    return (value < 10 ? '0' : '') + value;
239  }
240
241  function timeToDate(input, settings) {
242    return (typeof input == 'object') ? normaliseTime(input) : timeStringToDate(input, settings);
243  }
244
245  function timeStringToDate(input, settings) {
246    if (input) {
247      var array = input.split(settings.separator);
248      var hours = parseFloat(array[0]);
249      var minutes = parseFloat(array[1]);
250
251      // Convert AM/PM hour to 24-hour format.
252      if (!settings.show24Hours) {
253        if (hours === 12 && input.indexOf('AM') !== -1) {
254          hours = 0;
255        }
256        else if (hours !== 12 && input.indexOf('PM') !== -1) {
257          hours += 12;
258        }
259      }
260      var time = new Date(0, 0, 0, hours, minutes, 0);
261      return normaliseTime(time);
262    }
263    return null;
264  }
265
266  /* Normalise time object to a common date. */
267  function normaliseTime(time) {
268    time.setFullYear(2001);
269    time.setMonth(0);
270    time.setDate(0);
271    return time;
272  }
273
274})(jQuery);