From 5de485074a14fdde69b5b7a19f67a45b5819137a Mon Sep 17 00:00:00 2001 From: Khodor Date: Tue, 28 May 2013 19:44:04 +0300 Subject: [PATCH 1/2] Small Changes Removed the calls to $.browser since it is not supported by jQuery any longer, instead i did a quick call to userAgent. Also, change the z-index to 1051 to be on top on bootstrap modals --- jquery.timePicker.js | 446 +++++++++++++++++++-------------------- jquery.timePicker.min.js | 2 +- timePicker.css | 2 +- 3 files changed, 223 insertions(+), 227 deletions(-) diff --git a/jquery.timePicker.js b/jquery.timePicker.js index 41b35c1..0b9218f 100644 --- a/jquery.timePicker.js +++ b/jquery.timePicker.js @@ -18,260 +18,256 @@ * show24Hours: use a 24-hour scheme */ -(function($){ - $.fn.timePicker = function(options) { - // Build main options before element iteration - var settings = $.extend({}, $.fn.timePicker.defaults, options); +;(function ($) { + $.fn.timePicker = function (options) { + // Build main options before element iteration + var settings = $.extend({}, $.fn.timePicker.defaults, options); - return this.each(function() { - $.timePicker(this, settings); - }); - }; + return this.each(function () { + $.timePicker(this, settings); + }); + }; - $.timePicker = function (elm, settings) { - var e = $(elm)[0]; - return e.timePicker || (e.timePicker = new jQuery._timePicker(e, settings)); - }; + $.timePicker = function (elm, settings) { + var e = $(elm)[0]; + return e.timePicker || (e.timePicker = new jQuery._timePicker(e, settings)); + }; - $.timePicker.version = '0.3'; + $.timePicker.version = '0.3'; - $._timePicker = function(elm, settings) { + $._timePicker = function (elm, settings) { - var tpOver = false; - var keyDown = false; - var startTime = timeToDate(settings.startTime, settings); - var endTime = timeToDate(settings.endTime, settings); - var selectedClass = "selected"; - var selectedSelector = "li." + selectedClass; + var tpOver = false; + var keyDown = false; + var startTime = timeToDate(settings.startTime, settings); + var endTime = timeToDate(settings.endTime, settings); + var selectedClass = "selected"; + var selectedSelector = "li." + selectedClass; - $(elm).attr('autocomplete', 'OFF'); // Disable browser autocomplete + $(elm).attr('autocomplete', 'OFF'); // Disable browser autocomplete - var times = []; - var time = new Date(startTime); // Create a new date object. - while(time <= endTime) { - times[times.length] = formatTime(time, settings); - time = new Date(time.setMinutes(time.getMinutes() + settings.step)); - } + var times = []; + var time = new Date(startTime); // Create a new date object. + while (time <= endTime) { + times[times.length] = formatTime(time, settings); + time = new Date(time.setMinutes(time.getMinutes() + settings.step)); + } - var $tpDiv = $('
'); - var $tpList = $(''); + var $tpDiv = $('
'); + var $tpList = $(''); - // Build the list. - for(var i = 0; i < times.length; i++) { - $tpList.append("
  • " + times[i] + "
    • "); - } - $tpDiv.append($tpList); - // Append the timPicker to the body and position it. - $tpDiv.appendTo('body').hide(); + // Build the list. + for (var i = 0; i < times.length; i++) { + $tpList.append("
  • " + times[i] + "
    • "); + } + $tpDiv.append($tpList); + // Append the timPicker to the body and position it. + $tpDiv.appendTo('body').hide(); - // Store the mouse state, used by the blur event. Use mouseover instead of - // mousedown since Opera fires blur before mousedown. - $tpDiv.mouseover(function() { - tpOver = true; - }).mouseout(function() { - tpOver = false; - }); + // Store the mouse state, used by the blur event. Use mouseover instead of + // mousedown since Opera fires blur before mousedown. + $tpDiv.mouseover(function () { + tpOver = true; + }).mouseout(function () { + tpOver = false; + }); - $("li", $tpList).mouseover(function() { - if (!keyDown) { - $(selectedSelector, $tpDiv).removeClass(selectedClass); - $(this).addClass(selectedClass); - } - }).mousedown(function() { - tpOver = true; - }).click(function() { - setTimeVal(elm, this, $tpDiv, settings); - tpOver = false; - }); + $("li", $tpList).mouseover(function () { + if (!keyDown) { + $(selectedSelector, $tpDiv).removeClass(selectedClass); + $(this).addClass(selectedClass); + } + }).mousedown(function () { + tpOver = true; + }).click(function () { + setTimeVal(elm, this, $tpDiv, settings); + tpOver = false; + }); - var showPicker = function() { - if ($tpDiv.is(":visible")) { - return false; - } - $("li", $tpDiv).removeClass(selectedClass); + var showPicker = function () { + if ($tpDiv.is(":visible")) { + return false; + } + $("li", $tpDiv).removeClass(selectedClass); - // Position - var elmOffset = $(elm).offset(); - $tpDiv.css({'top':elmOffset.top + elm.offsetHeight, 'left':elmOffset.left}); + // Position + var elmOffset = $(elm).offset(); + $tpDiv.css({ 'top': elmOffset.top + elm.offsetHeight, 'left': elmOffset.left }); - // Show picker. This has to be done before scrollTop is set since that - // can't be done on hidden elements. - $tpDiv.show(); + // Show picker. This has to be done before scrollTop is set since that + // can't be done on hidden elements. + $tpDiv.show(); - // Try to find a time in the list that matches the entered time. - var time = elm.value ? timeStringToDate(elm.value, settings) : startTime; - var startMin = startTime.getHours() * 60 + startTime.getMinutes(); - var min = (time.getHours() * 60 + time.getMinutes()) - startMin; - var steps = Math.round(min / settings.step); - var roundTime = normaliseTime(new Date(0, 0, 0, 0, (steps * settings.step + startMin), 0)); - roundTime = (startTime < roundTime && roundTime <= endTime) ? roundTime : startTime; - var $matchedTime = $("li:contains(" + formatTime(roundTime, settings) + ")", $tpDiv); + // Try to find a time in the list that matches the entered time. + var time = elm.value ? timeStringToDate(elm.value, settings) : startTime; + var startMin = startTime.getHours() * 60 + startTime.getMinutes(); + var min = (time.getHours() * 60 + time.getMinutes()) - startMin; + var steps = Math.round(min / settings.step); + var roundTime = normaliseTime(new Date(0, 0, 0, 0, (steps * settings.step + startMin), 0)); + roundTime = (startTime < roundTime && roundTime <= endTime) ? roundTime : startTime; + var $matchedTime = $("li:contains(" + formatTime(roundTime, settings) + ")", $tpDiv); - if ($matchedTime.length) { - $matchedTime.addClass(selectedClass); - // Scroll to matched time. - $tpDiv[0].scrollTop = $matchedTime[0].offsetTop; - } - return true; - }; - // Attach to click as well as focus so timePicker can be shown again when - // clicking on the input when it already has focus. - $(elm).focus(showPicker).click(showPicker); - // Hide timepicker on blur - $(elm).blur(function() { - if (!tpOver) { - $tpDiv.hide(); - } - }); - // Keypress doesn't repeat on Safari for non-text keys. - // Keydown doesn't repeat on Firefox and Opera on Mac. - // Using kepress for Opera and Firefox and keydown for the rest seems to - // work with up/down/enter/esc. - var event = ($.browser.opera || $.browser.mozilla) ? 'keypress' : 'keydown'; - $(elm)[event](function(e) { - var $selected; - keyDown = true; - var top = $tpDiv[0].scrollTop; - switch (e.keyCode) { - case 38: // Up arrow. - // Just show picker if it's hidden. - if (showPicker()) { - return false; - }; - $selected = $(selectedSelector, $tpList); - var prev = $selected.prev().addClass(selectedClass)[0]; - if (prev) { - $selected.removeClass(selectedClass); - // Scroll item into view. - if (prev.offsetTop < top) { - $tpDiv[0].scrollTop = top - prev.offsetHeight; + if ($matchedTime.length) { + $matchedTime.addClass(selectedClass); + // Scroll to matched time. + $tpDiv[0].scrollTop = $matchedTime[0].offsetTop; } - } - else { - // Loop to next item. - $selected.removeClass(selectedClass); - prev = $("li:last", $tpList).addClass(selectedClass)[0]; - $tpDiv[0].scrollTop = prev.offsetTop - prev.offsetHeight; - } - return false; - break; - case 40: // Down arrow, similar in behaviour to up arrow. - if (showPicker()) { - return false; - }; - $selected = $(selectedSelector, $tpList); - var next = $selected.next().addClass(selectedClass)[0]; - if (next) { - $selected.removeClass(selectedClass); - if (next.offsetTop + next.offsetHeight > top + $tpDiv[0].offsetHeight) { - $tpDiv[0].scrollTop = top + next.offsetHeight; + return true; + }; + // Attach to click as well as focus so timePicker can be shown again when + // clicking on the input when it already has focus. + $(elm).focus(showPicker).click(showPicker); + // Hide timepicker on blur + $(elm).blur(function () { + if (!tpOver) { + $tpDiv.hide(); } - } - else { - $selected.removeClass(selectedClass); - next = $("li:first", $tpList).addClass(selectedClass)[0]; - $tpDiv[0].scrollTop = 0; - } - return false; - break; - case 13: // Enter - if ($tpDiv.is(":visible")) { - var sel = $(selectedSelector, $tpList)[0]; - setTimeVal(elm, sel, $tpDiv, settings); - } - return false; - break; - case 27: // Esc - $tpDiv.hide(); - return false; - break; - } - return true; - }); - $(elm).keyup(function(e) { - keyDown = false; - }); - // Helper function to get an inputs current time as Date object. - // Returns a Date object. - this.getTime = function() { - return timeStringToDate(elm.value, settings); - }; - // Helper function to set a time input. - // Takes a Date object or string. - this.setTime = function(time) { - elm.value = formatTime(timeToDate(time, settings), settings); - // Trigger element's change events. - $(elm).change(); - }; + }); + // Keypress doesn't repeat on Safari for non-text keys. + // Keydown doesn't repeat on Firefox and Opera on Mac. + // Using kepress for Opera and Firefox and keydown for the rest seems to + // work with up/down/enter/esc. + var event = (navigator.userAgent.indexOf("opera") >= 0 || navigator.userAgent.indexOf("mozilla") >= 0) ? 'keypress' : 'keydown'; + $(elm)[event](function (e) { + var $selected; + keyDown = true; + var top = $tpDiv[0].scrollTop; + switch (e.keyCode) { + case 38: // Up arrow. + // Just show picker if it's hidden. + if (showPicker()) { + return false; + }; + $selected = $(selectedSelector, $tpList); + var prev = $selected.prev().addClass(selectedClass)[0]; + if (prev) { + $selected.removeClass(selectedClass); + // Scroll item into view. + if (prev.offsetTop < top) { + $tpDiv[0].scrollTop = top - prev.offsetHeight; + } + } + else { + // Loop to next item. + $selected.removeClass(selectedClass); + prev = $("li:last", $tpList).addClass(selectedClass)[0]; + $tpDiv[0].scrollTop = prev.offsetTop - prev.offsetHeight; + } + return false; + break; + case 40: // Down arrow, similar in behaviour to up arrow. + if (showPicker()) { + return false; + }; + $selected = $(selectedSelector, $tpList); + var next = $selected.next().addClass(selectedClass)[0]; + if (next) { + $selected.removeClass(selectedClass); + if (next.offsetTop + next.offsetHeight > top + $tpDiv[0].offsetHeight) { + $tpDiv[0].scrollTop = top + next.offsetHeight; + } + } + else { + $selected.removeClass(selectedClass); + next = $("li:first", $tpList).addClass(selectedClass)[0]; + $tpDiv[0].scrollTop = 0; + } + return false; + break; + case 13: // Enter + if ($tpDiv.is(":visible")) { + var sel = $(selectedSelector, $tpList)[0]; + setTimeVal(elm, sel, $tpDiv, settings); + } + return false; + break; + case 27: // Esc + $tpDiv.hide(); + return false; + break; + } + return true; + }); + $(elm).keyup(function (e) { + keyDown = false; + }); + // Helper function to get an inputs current time as Date object. + // Returns a Date object. + this.getTime = function () { + return timeStringToDate(elm.value, settings); + }; + // Helper function to set a time input. + // Takes a Date object or string. + this.setTime = function (time) { + elm.value = formatTime(timeToDate(time, settings), settings); + // Trigger element's change events. + $(elm).change(); + }; - }; // End fn; + }; // End fn; - // Plugin defaults. - $.fn.timePicker.defaults = { - step:30, - startTime: new Date(0, 0, 0, 0, 0, 0), - endTime: new Date(0, 0, 0, 23, 30, 0), - separator: ':', - show24Hours: true - }; + // Plugin defaults. + $.fn.timePicker.defaults = { + step: 30, + startTime: new Date(0, 0, 0, 0, 0, 0), + endTime: new Date(0, 0, 0, 23, 30, 0), + separator: ':', + show24Hours: true + }; - // Private functions. + // Private functions. - function setTimeVal(elm, sel, $tpDiv, settings) { - // Update input field - elm.value = $(sel).text(); - // Trigger element's change events. - $(elm).change(); - // Keep focus for all but IE (which doesn't like it) - if (!$.browser.msie) { - elm.focus(); + function setTimeVal(elm, sel, $tpDiv, settings) { + // Update input field + elm.value = $(sel).text(); + // Trigger element's change events. + $(elm).change(); + // Hide picker + $tpDiv.hide(); } - // Hide picker - $tpDiv.hide(); - } - function formatTime(time, settings) { - var h = time.getHours(); - var hours = settings.show24Hours ? h : (((h + 11) % 12) + 1); - var minutes = time.getMinutes(); - return formatNumber(hours) + settings.separator + formatNumber(minutes) + (settings.show24Hours ? '' : ((h < 12) ? ' AM' : ' PM')); - } + function formatTime(time, settings) { + var h = time.getHours(); + var hours = settings.show24Hours ? h : (((h + 11) % 12) + 1); + var minutes = time.getMinutes(); + return formatNumber(hours) + settings.separator + formatNumber(minutes) + (settings.show24Hours ? '' : ((h < 12) ? ' AM' : ' PM')); + } - function formatNumber(value) { - return (value < 10 ? '0' : '') + value; - } + function formatNumber(value) { + return (value < 10 ? '0' : '') + value; + } - function timeToDate(input, settings) { - return (typeof input == 'object') ? normaliseTime(input) : timeStringToDate(input, settings); - } + function timeToDate(input, settings) { + return (typeof input == 'object') ? normaliseTime(input) : timeStringToDate(input, settings); + } - function timeStringToDate(input, settings) { - if (input) { - var array = input.split(settings.separator); - var hours = parseFloat(array[0]); - var minutes = parseFloat(array[1]); + function timeStringToDate(input, settings) { + if (input) { + var array = input.split(settings.separator); + var hours = parseFloat(array[0]); + var minutes = parseFloat(array[1]); - // Convert AM/PM hour to 24-hour format. - if (!settings.show24Hours) { - if (hours === 12 && input.indexOf('AM') !== -1) { - hours = 0; - } - else if (hours !== 12 && input.indexOf('PM') !== -1) { - hours += 12; + // Convert AM/PM hour to 24-hour format. + if (!settings.show24Hours) { + if (hours === 12 && input.indexOf('AM') !== -1) { + hours = 0; + } + else if (hours !== 12 && input.indexOf('PM') !== -1) { + hours += 12; + } + } + var time = new Date(0, 0, 0, hours, minutes, 0); + return normaliseTime(time); } - } - var time = new Date(0, 0, 0, hours, minutes, 0); - return normaliseTime(time); + return null; } - return null; - } - /* Normalise time object to a common date. */ - function normaliseTime(time) { - time.setFullYear(2001); - time.setMonth(0); - time.setDate(0); - return time; - } + /* Normalise time object to a common date. */ + function normaliseTime(time) { + time.setFullYear(2001); + time.setMonth(0); + time.setDate(0); + return time; + } -})(jQuery); +})(jQuery); \ No newline at end of file diff --git a/jquery.timePicker.min.js b/jquery.timePicker.min.js index 2e092fd..3e3d2df 100644 --- a/jquery.timePicker.min.js +++ b/jquery.timePicker.min.js @@ -1 +1 @@ -(function(a){function g(a){a.setFullYear(2001),a.setMonth(0),a.setDate(0);return a}function f(a,b){if(a){var c=a.split(b.separator),d=parseFloat(c[0]),e=parseFloat(c[1]);b.show24Hours||(d===12&&a.indexOf("AM")!==-1?d=0:d!==12&&a.indexOf("PM")!==-1&&(d+=12));var f=new Date(0,0,0,d,e,0);return g(f)}return null}function e(a,b){return typeof a=="object"?g(a):f(a,b)}function d(a){return(a<10?"0":"")+a}function c(a,b){var c=a.getHours(),e=b.show24Hours?c:(c+11)%12+1,f=a.getMinutes();return d(e)+b.separator+d(f)+(b.show24Hours?"":c<12?" AM":" PM")}function b(b,c,d,e){b.value=a(c).text(),a(b).change(),a.browser.msie||b.focus(),d.hide()}a.fn.timePicker=function(b){var c=a.extend({},a.fn.timePicker.defaults,b);return this.each(function(){a.timePicker(this,c)})},a.timePicker=function(b,c){var d=a(b)[0];return d.timePicker||(d.timePicker=new jQuery._timePicker(d,c))},a.timePicker.version="0.3",a._timePicker=function(d,h){var i=!1,j=!1,k=e(h.startTime,h),l=e(h.endTime,h),m="selected",n="li."+m;a(d).attr("autocomplete","OFF");var o=[],p=new Date(k);while(p<=l)o[o.length]=c(p,h),p=new Date(p.setMinutes(p.getMinutes()+h.step));var q=a('
    '),r=a("");for(var s=0;s"+o[s]+"");q.append(r),q.appendTo("body").hide(),q.mouseover(function(){i=!0}).mouseout(function(){i=!1}),a("li",r).mouseover(function(){j||(a(n,q).removeClass(m),a(this).addClass(m))}).mousedown(function(){i=!0}).click(function(){b(d,this,q,h),i=!1});var t=function(){if(q.is(":visible"))return!1;a("li",q).removeClass(m);var b=a(d).offset();q.css({top:b.top+d.offsetHeight,left:b.left}),q.show();var e=d.value?f(d.value,h):k,i=k.getHours()*60+k.getMinutes(),j=e.getHours()*60+e.getMinutes()-i,n=Math.round(j/h.step),o=g(new Date(0,0,0,0,n*h.step+i,0));o=kf+q[0].offsetHeight&&(q[0].scrollTop=f+i.offsetHeight)):(e.removeClass(m),i=a("li:first",r).addClass(m)[0],q[0].scrollTop=0);return!1;case 13:if(q.is(":visible")){var k=a(n,r)[0];b(d,k,q,h)}return!1;case 27:q.hide();return!1}return!0}),a(d).keyup(function(a){j=!1}),this.getTime=function(){return f(d.value,h)},this.setTime=function(b){d.value=c(e(b,h),h),a(d).change()}},a.fn.timePicker.defaults={step:30,startTime:new Date(0,0,0,0,0,0),endTime:new Date(0,0,0,23,30,0),separator:":",show24Hours:!0}})(jQuery) \ No newline at end of file +(function(n){function f(t,i,r){t.value=n(i).text(),n(t).change(),r.hide()}function t(n,t){var i=n.getHours(),r=t.show24Hours?i:(i+11)%12+1,u=n.getMinutes();return e(r)+t.separator+e(u)+(t.show24Hours?"":i<12?" AM":" PM")}function e(n){return(n<10?"0":"")+n}function i(n,t){return typeof n=="object"?u(n):r(n,t)}function r(n,t){var f;if(n){var r=n.split(t.separator),i=parseFloat(r[0]),e=parseFloat(r[1]);return t.show24Hours||(i===12&&n.indexOf("AM")!==-1?i=0:i!==12&&n.indexOf("PM")!==-1&&(i+=12)),f=new Date(0,0,0,i,e,0),u(f)}return null}function u(n){return n.setFullYear(2001),n.setMonth(0),n.setDate(0),n}n.fn.timePicker=function(t){var i=n.extend({},n.fn.timePicker.defaults,t);return this.each(function(){n.timePicker(this,i)})},n.timePicker=function(t,i){var r=n(t)[0];return r.timePicker||(r.timePicker=new jQuery._timePicker(r,i))},n.timePicker.version="0.3",n._timePicker=function(e,o){var v=!1,k=!1,l=i(o.startTime,o),d=i(o.endTime,o),h="selected",w="li."+h,y,a,s,c,b,p,g;for(n(e).attr("autocomplete","OFF"),y=[],a=new Date(l);a<=d;)y[y.length]=t(a,o),a=new Date(a.setMinutes(a.getMinutes()+o.step));for(s=n('
    <\/div>'),c=n("
      <\/ul>"),b=0;b"+y[b]+"<\/li>");s.append(c),s.appendTo("body").hide(),s.mouseover(function(){v=!0}).mouseout(function(){v=!1}),n("li",c).mouseover(function(){k||(n(w,s).removeClass(h),n(this).addClass(h))}).mousedown(function(){v=!0}).click(function(){f(e,this,s,o),v=!1}),p=function(){var c,f;if(s.is(":visible"))return!1;n("li",s).removeClass(h),c=n(e).offset(),s.css({top:c.top+e.offsetHeight,left:c.left}),s.show();var a=e.value?r(e.value,o):l,v=l.getHours()*60+l.getMinutes(),y=a.getHours()*60+a.getMinutes()-v,p=Math.round(y/o.step),i=u(new Date(0,0,0,0,p*o.step+v,0));return i=l=0||navigator.userAgent.indexOf("mozilla")>=0?"keypress":"keydown",n(e)[g](function(t){var i,l,r,u,a;k=!0,l=s[0].scrollTop;switch(t.keyCode){case 38:return p()?!1:(i=n(w,c),r=i.prev().addClass(h)[0],r?(i.removeClass(h),r.offsetTopl+s[0].offsetHeight&&(s[0].scrollTop=l+u.offsetHeight)):(i.removeClass(h),u=n("li:first",c).addClass(h)[0],s[0].scrollTop=0),!1);case 13:return s.is(":visible")&&(a=n(w,c)[0],f(e,a,s,o)),!1;case 27:return s.hide(),!1}return!0}),n(e).keyup(function(){k=!1}),this.getTime=function(){return r(e.value,o)},this.setTime=function(r){e.value=t(i(r,o),o),n(e).change()}},n.fn.timePicker.defaults={step:30,startTime:new Date(0,0,0,0,0,0),endTime:new Date(0,0,0,23,30,0),separator:":",show24Hours:!0}})(jQuery) \ No newline at end of file diff --git a/timePicker.css b/timePicker.css index 07ea413..186ad3e 100644 --- a/timePicker.css +++ b/timePicker.css @@ -5,7 +5,7 @@ div.time-picker { overflow: auto; background: #fff; border: 1px solid #aaa; - z-index: 99; +z-index: 1051; /* for bootstrap modals */ margin: 0; } div.time-picker-12hours { From b4f6469230389c8c3181b6da5906ce25997b40b0 Mon Sep 17 00:00:00 2001 From: Khodor Date: Wed, 29 May 2013 15:51:56 +0300 Subject: [PATCH 2/2] CSS for bootstrap Modified CSS to look better with Twitter's Bootstrap --- timePicker.css | 48 ++++++++++++++++++++++++++++-------------------- 1 file changed, 28 insertions(+), 20 deletions(-) diff --git a/timePicker.css b/timePicker.css index 186ad3e..d1addc0 100644 --- a/timePicker.css +++ b/timePicker.css @@ -1,29 +1,37 @@ +input.time-selector { + cursor: default; + background-color: rgb(255, 255, 255); +} + div.time-picker { - position: absolute; - height: 191px; - width:4em; /* needed for IE */ - overflow: auto; - background: #fff; - border: 1px solid #aaa; -z-index: 1051; /* for bootstrap modals */ - margin: 0; + position: absolute; + height: 191px; + width: 212px; + overflow: auto; + background: #fff; + border: 1px solid #ccc; + z-index: 1051; + padding: 4px 3px; + margin: 0; + box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.075); } + div.time-picker-12hours { - width:6em; /* needed for IE */ + width: 6em; /* needed for IE */ } div.time-picker ul { - list-style-type: none; - margin: 0; - padding: 0; + list-style-type: none; + margin: 0; + padding: 0; } + div.time-picker li { - cursor: pointer; - height: 10px; - font: 12px/1 Helvetica, Arial, sans-serif; - padding: 4px 3px; + cursor: pointer; + padding: 2px 3px; } -div.time-picker li.selected { - background: #0063CE; - color: #fff; -} \ No newline at end of file + + div.time-picker li.selected { + background: #53a3b7; + color: #fff; + } \ No newline at end of file