diff --git a/README.md b/README.md index 432e15c..17a1ccb 100644 --- a/README.md +++ b/README.md @@ -7,17 +7,19 @@ Material concept time picker jquery plugin. ![alt text](https://i.imgur.com/M7Jb5H3.png "TimePicker: Hour") ![alt text](https://i.imgur.com/LmIkHoU.png "TimePicker: Minute") -![alt text](https://i.imgur.com/EUZoPeI.png "TimePicker: Dark") +![alt text](https://i.imgur.com/WyS2aHd.png "TimePicker: Dark") +![alt text](https://i.imgur.com/kNqqKMZ.png "TimePicker: 24-hour mode") ## Options Default time picker configurations. ```javascript { timeFormat: 'hh:mm:ss.000', // format of the time value (data-time attribute) - format: 'h:mm tt', // format of the input value - theme: 'blue', // theme of the timepicker - hourPadding: false // determines if display value has zero padding for hour value less than 10 (i.e. 05:30 PM); 24-hour format has padding by default - clearBtn: false // determines if clear button is visible + format: 'h:mm tt', // format of the input value + theme: 'blue', // theme of the timepicker + hourPadding: false, // determines if display value has zero padding for hour value less than 10 (i.e. 05:30 PM); 24-hour format has padding by default + clearBtn: false, // determines if clear button is visible + is24hour: false // determines if the clock will use 24-hour format in the UI; format config will be forced to `hh:mm` if not specified } ``` @@ -35,6 +37,7 @@ The default value of the `format` option is `h:mm tt`. You can specify the forma ```javascript $('#timepicker').mdtimepicker({format: 'hh:mm'}); //Initializes the time picker and uses the specified format (i.e. 23:30) ``` +***Note: If `is24hour` configuration is set to `true`, `format` default will be `hh:mm`.*** ## How to use Make sure you include the jQuery library first. diff --git a/mdtimepicker.css b/mdtimepicker.css index bd7a915..94fcbf7 100644 --- a/mdtimepicker.css +++ b/mdtimepicker.css @@ -1,10 +1,8 @@ -/*!Don't remove this! - * jQuery MDTimePicker v1.0 plugin +/* !Don't remove this! + * jQuery MDTimePicker plugin styles * * Author: Dionlee Uy * Email: dionleeuy@gmail.com - * - * Date: Tuesday, August 28 2017 */ @import url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap'); @@ -31,6 +29,7 @@ bottom: 24px; min-width: 280px; opacity: 1; + outline: none; user-select: none; border-radius: 4px; transform: translateX(-50%) scale(1); @@ -136,6 +135,11 @@ transform-origin: right center; z-index: 1; } + .mdtp__clock .mdtp__digit.inner--digit { + width: 36%; + left: 14%; + z-index: 2; + } .mdtp__clock .mdtp__digit span { display: inline-block; width: 32px; @@ -189,58 +193,70 @@ line-height: 24px; margin-left: 10px; } +.mdtp__digit.rotate--15 { transform: rotate(-15deg); } .mdtp__digit.rotate--15 span { transform: rotate(15deg); } .mdtp__digit.rotate-6 { transform: rotate(6deg); } .mdtp__digit.rotate-6 span { transform: rotate(-6deg); } .mdtp__digit.rotate-12 { transform: rotate(12deg); } .mdtp__digit.rotate-12 span { transform: rotate(-12deg); } +.mdtp__digit.rotate-15 { transform: rotate(15deg); } .mdtp__digit.rotate-15 span { transform: rotate(-15deg); } .mdtp__digit.rotate-18 { transform: rotate(18deg); } .mdtp__digit.rotate-18 span { transform: rotate(-18deg); } .mdtp__digit.rotate-24 { transform: rotate(24deg); } .mdtp__digit.rotate-24 span { transform: rotate(-24deg); } .mdtp__digit.rotate-30 { transform: rotate(30deg); } .mdtp__digit.rotate-30 span { transform: rotate(-30deg); } .mdtp__digit.rotate-36 { transform: rotate(36deg); } .mdtp__digit.rotate-36 span { transform: rotate(-36deg); } .mdtp__digit.rotate-42 { transform: rotate(42deg); } .mdtp__digit.rotate-42 span { transform: rotate(-42deg); } +.mdtp__digit.rotate-45 { transform: rotate(45deg); } .mdtp__digit.rotate-45 span { transform: rotate(-45deg); } .mdtp__digit.rotate-48 { transform: rotate(48deg); } .mdtp__digit.rotate-48 span { transform: rotate(-48deg); } .mdtp__digit.rotate-54 { transform: rotate(54deg); } .mdtp__digit.rotate-54 span { transform: rotate(-54deg); } .mdtp__digit.rotate-60 { transform: rotate(60deg); } .mdtp__digit.rotate-60 span { transform: rotate(-60deg); } .mdtp__digit.rotate-66 { transform: rotate(66deg); } .mdtp__digit.rotate-66 span { transform: rotate(-66deg); } .mdtp__digit.rotate-72 { transform: rotate(72deg); } .mdtp__digit.rotate-72 span { transform: rotate(-72deg); } +.mdtp__digit.rotate-75 { transform: rotate(75deg); } .mdtp__digit.rotate-75 span { transform: rotate(-75deg); } .mdtp__digit.rotate-78 { transform: rotate(78deg); } .mdtp__digit.rotate-78 span { transform: rotate(-78deg); } .mdtp__digit.rotate-84 { transform: rotate(84deg); } .mdtp__digit.rotate-84 span { transform: rotate(-84deg); } .mdtp__digit.rotate-90 { transform: rotate(90deg); } .mdtp__digit.rotate-90 span { transform: rotate(-90deg); } .mdtp__digit.rotate-96 { transform: rotate(96deg); } .mdtp__digit.rotate-96 span { transform: rotate(-96deg); } .mdtp__digit.rotate-102 { transform: rotate(102deg); } .mdtp__digit.rotate-102 span { transform: rotate(-102deg); } +.mdtp__digit.rotate-105 { transform: rotate(105deg); } .mdtp__digit.rotate-105 span { transform: rotate(-105deg); } .mdtp__digit.rotate-108 { transform: rotate(108deg); } .mdtp__digit.rotate-108 span { transform: rotate(-108deg); } .mdtp__digit.rotate-114 { transform: rotate(114deg); } .mdtp__digit.rotate-114 span { transform: rotate(-114deg); } .mdtp__digit.rotate-120 { transform: rotate(120deg); } .mdtp__digit.rotate-120 span { transform: rotate(-120deg); } .mdtp__digit.rotate-126 { transform: rotate(126deg); } .mdtp__digit.rotate-126 span { transform: rotate(-126deg); } .mdtp__digit.rotate-132 { transform: rotate(132deg); } .mdtp__digit.rotate-132 span { transform: rotate(-132deg); } +.mdtp__digit.rotate-135 { transform: rotate(135deg); } .mdtp__digit.rotate-135 span { transform: rotate(-135deg); } .mdtp__digit.rotate-138 { transform: rotate(138deg); } .mdtp__digit.rotate-138 span { transform: rotate(-138deg); } .mdtp__digit.rotate-144 { transform: rotate(144deg); } .mdtp__digit.rotate-144 span { transform: rotate(-144deg); } .mdtp__digit.rotate-150 { transform: rotate(150deg); } .mdtp__digit.rotate-150 span { transform: rotate(-150deg); } .mdtp__digit.rotate-156 { transform: rotate(156deg); } .mdtp__digit.rotate-156 span { transform: rotate(-156deg); } .mdtp__digit.rotate-162 { transform: rotate(162deg); } .mdtp__digit.rotate-162 span { transform: rotate(-162deg); } +.mdtp__digit.rotate-165 { transform: rotate(165deg); } .mdtp__digit.rotate-165 span { transform: rotate(-165deg); } .mdtp__digit.rotate-168 { transform: rotate(168deg); } .mdtp__digit.rotate-168 span { transform: rotate(-168deg); } .mdtp__digit.rotate-174 { transform: rotate(174deg); } .mdtp__digit.rotate-174 span { transform: rotate(-174deg); } .mdtp__digit.rotate-180 { transform: rotate(180deg); } .mdtp__digit.rotate-180 span { transform: rotate(-180deg); } .mdtp__digit.rotate-186 { transform: rotate(186deg); } .mdtp__digit.rotate-186 span { transform: rotate(-186deg); } .mdtp__digit.rotate-192 { transform: rotate(192deg); } .mdtp__digit.rotate-192 span { transform: rotate(-192deg); } +.mdtp__digit.rotate-195 { transform: rotate(195deg); } .mdtp__digit.rotate-195 span { transform: rotate(-195deg); } .mdtp__digit.rotate-198 { transform: rotate(198deg); } .mdtp__digit.rotate-198 span { transform: rotate(-198deg); } .mdtp__digit.rotate-204 { transform: rotate(204deg); } .mdtp__digit.rotate-204 span { transform: rotate(-204deg); } .mdtp__digit.rotate-210 { transform: rotate(210deg); } .mdtp__digit.rotate-210 span { transform: rotate(-210deg); } .mdtp__digit.rotate-216 { transform: rotate(216deg); } .mdtp__digit.rotate-216 span { transform: rotate(-216deg); } .mdtp__digit.rotate-222 { transform: rotate(222deg); } .mdtp__digit.rotate-222 span { transform: rotate(-222deg); } +.mdtp__digit.rotate-225 { transform: rotate(225deg); } .mdtp__digit.rotate-225 span { transform: rotate(-225deg); } .mdtp__digit.rotate-228 { transform: rotate(228deg); } .mdtp__digit.rotate-228 span { transform: rotate(-228deg); } .mdtp__digit.rotate-234 { transform: rotate(234deg); } .mdtp__digit.rotate-234 span { transform: rotate(-234deg); } .mdtp__digit.rotate-240 { transform: rotate(240deg); } .mdtp__digit.rotate-240 span { transform: rotate(-240deg); } .mdtp__digit.rotate-246 { transform: rotate(246deg); } .mdtp__digit.rotate-246 span { transform: rotate(-246deg); } .mdtp__digit.rotate-252 { transform: rotate(252deg); } .mdtp__digit.rotate-252 span { transform: rotate(-252deg); } +.mdtp__digit.rotate-255 { transform: rotate(255deg); } .mdtp__digit.rotate-255 span { transform: rotate(-255deg); } .mdtp__digit.rotate-258 { transform: rotate(258deg); } .mdtp__digit.rotate-258 span { transform: rotate(-258deg); } .mdtp__digit.rotate-264 { transform: rotate(264deg); } .mdtp__digit.rotate-264 span { transform: rotate(-264deg); } .mdtp__digit.rotate-270 { transform: rotate(270deg); } .mdtp__digit.rotate-270 span { transform: rotate(-270deg); } .mdtp__digit.rotate-276 { transform: rotate(276deg); } .mdtp__digit.rotate-276 span { transform: rotate(-276deg); } .mdtp__digit.rotate-282 { transform: rotate(282deg); } .mdtp__digit.rotate-282 span { transform: rotate(-282deg); } +.mdtp__digit.rotate-285 { transform: rotate(285deg); } .mdtp__digit.rotate-285 span { transform: rotate(-285deg); } .mdtp__digit.rotate-288 { transform: rotate(288deg); } .mdtp__digit.rotate-288 span { transform: rotate(-288deg); } .mdtp__digit.rotate-294 { transform: rotate(294deg); } .mdtp__digit.rotate-294 span { transform: rotate(-294deg); } .mdtp__digit.rotate-300 { transform: rotate(300deg); } .mdtp__digit.rotate-300 span { transform: rotate(-300deg); } .mdtp__digit.rotate-306 { transform: rotate(306deg); } .mdtp__digit.rotate-306 span { transform: rotate(-306deg); } .mdtp__digit.rotate-312 { transform: rotate(312deg); } .mdtp__digit.rotate-312 span { transform: rotate(-312deg); } +.mdtp__digit.rotate-315 { transform: rotate(315deg); } .mdtp__digit.rotate-315 span { transform: rotate(-315deg); } .mdtp__digit.rotate-318 { transform: rotate(318deg); } .mdtp__digit.rotate-318 span { transform: rotate(-318deg); } .mdtp__digit.rotate-324 { transform: rotate(324deg); } .mdtp__digit.rotate-324 span { transform: rotate(-324deg); } .mdtp__digit.rotate-330 { transform: rotate(330deg); } .mdtp__digit.rotate-330 span { transform: rotate(-330deg); } @@ -357,7 +373,7 @@ width: 160px; padding: 20px; } - .mdtp__clock_holder { padding: 16px; } + /* .mdtp__clock_holder { padding: 16px; } */ .mdtp__clock .mdtp__am, .mdtp__clock .mdtp__pm { bottom: -4px; } .mdtp__clock .mdtp__am { left: -4px; } .mdtp__clock .mdtp__pm { right: -4px; } diff --git a/mdtimepicker.js b/mdtimepicker.js index 0e3251c..5833437 100644 --- a/mdtimepicker.js +++ b/mdtimepicker.js @@ -1,15 +1,24 @@ /* -- DO NOT REMOVE -- - * jQuery MDTimePicker v1.0 plugin + * jQuery MDTimePicker v1.0.2 plugin + * /~https://github.com/dmuy/MDTimePicker * * Author: Dionlee Uy * Email: dionleeuy@gmail.com * - * Date: Tuesday, August 28 2017 - * * @requires jQuery - * -- DO NOT REMOVE -- */ -if (typeof jQuery === 'undefined') { throw new Error('MDTimePicker: This plugin requires jQuery'); } -+function ($) { + * -- DO NOT REMOVE -- + */ +(function (factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery'], factory); + } else if (typeof exports === 'object') { + module.exports = factory(require('jquery'));; + } else { + factory(jQuery); + } +})(function ($) { + if (typeof $ === 'undefined') { throw new Error('MDTimePicker: This plugin requires jQuery'); } + var MDTP_DATA = "mdtimepicker", HOUR_START_DEG = 120, MIN_START_DEG = 90, END_DEG = 360, HOUR_DEG_INCR = 30, MIN_DEG_INCR = 6, EX_KEYS = [9, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123]; @@ -69,7 +78,7 @@ if (typeof jQuery === 'undefined') { throw new Error('MDTimePicker: This plugin this.selected = new Time(0, 0); this.timepicker = { overlay: $(''), - wrapper: $('
'), + wrapper: $('
'), timeHolder: { wrapper: $('
'), hour: $('12'), @@ -103,8 +112,13 @@ if (typeof jQuery === 'undefined') { throw new Error('MDTimePicker: This plugin _.setup().appendTo('body'); - picker.overlay.click(function(e) { _.hide(); }); - picker.wrapper.click(function(e) { e.stopPropagation() }); + picker.overlay.click(function () { _.hide(); }); + picker.wrapper.click(function (e) { e.stopPropagation() }) + .on('keydown', function (e) { + if (e.keyCode !== 27) return; + + _.hide(); + }); picker.clockHolder.am.click(function () { if (_.selected.getPeriod() !== 'AM') _.setPeriod('am'); }); picker.clockHolder.pm.click(function () { if (_.selected.getPeriod() !== 'PM') _.setPeriod('pm'); }); picker.timeHolder.hour.click(function () { if (_.activeView !== 'hours') _.switchView('hours'); }); @@ -138,7 +152,7 @@ if (typeof jQuery === 'undefined') { throw new Error('MDTimePicker: This plugin if (e.keyCode === 13) _.show(); return !(EX_KEYS.indexOf(e.which) < 0 && _.config.readOnly); }).on('click', function () { _.show(); }) - .prop('readonly', true); + .prop('readonly', true); if (_.input.val() !== '') { var time = _.parseTime(_.input.val(), _.config.format); @@ -168,18 +182,24 @@ if (typeof jQuery === 'undefined') { throw new Error('MDTimePicker: This plugin time.wrapper.append(time.hour) .append(time.dots) .append(time.minute) - .append(time.am_pm) .appendTo(wrapper); + if (!_.config.is24hour) time.wrapper.append(time.am_pm); + // Setup hours - for (var i = 0; i < 12; i++) { - var value = i + 1, deg = (HOUR_START_DEG + (i * HOUR_DEG_INCR)) % END_DEG, - hour = $('
' + value + '
'); + var _hours = _.config.is24hour ? 24 : 12; + for (var i = 0; i < _hours; i++) { + var value = i + 1, deg = ((HOUR_START_DEG + (i * HOUR_DEG_INCR)) % END_DEG) - (_.config.is24hour && value < 13 ? 15 : 0), + is24 = value === 24, + hour = $('
' + (is24 ? '00' : value) + '
'); + + if (_.config.is24hour && value < 13) hour.addClass('inner--digit'); hour.find('span').click(function () { var _hour = parseInt($(this).parent().data('hour')), _selectedT = _.selected.getPeriod(), - _value = (_hour + ((_selectedT === 'PM' && _hour < 12) || (_selectedT === 'AM' && _hour === 12) ? 12 : 0)) % 24, + _value = _.config.is24hour ? _hour : + (_hour + ((_selectedT === 'PM' && _hour < 12) || (_selectedT === 'AM' && _hour === 12) ? 12 : 0)) % 24, disabled = _.isDisabled(_value, 0); if (disabled) return; @@ -213,8 +233,8 @@ if (typeof jQuery === 'undefined') { throw new Error('MDTimePicker: This plugin } // Setup clock + if (!_.config.is24hour) clock.clock.wrapper.append(clock.am).append(clock.pm) clock.clock.wrapper - .append(clock.am).append(clock.pm) .append(clock.clock.dot) .append(clock.clock.hours) .append(clock.clock.minutes) @@ -246,15 +266,17 @@ if (typeof jQuery === 'undefined') { throw new Error('MDTimePicker: This plugin setHour: function (hour) { if (typeof hour === 'undefined') throw new Error('Expecting a value.'); - var that = this; + var that = this, is12Hour = !that.config.is24hour this.selected.setHour(hour); - this.timepicker.timeHolder.hour.text(this.selected.getHour(true)); + + var _selectedH = this.selected.getHour(is12Hour); + this.timepicker.timeHolder.hour.text(is12Hour ? _selectedH : this.selected.format('hh')); this.timepicker.clockHolder.clock.hours.children('div').each(function (idx, div) { var el = $(div), val = el.data('hour'); - el[val === that.selected.getHour(true) ? 'addClass' : 'removeClass']('active'); + el[val === _selectedH ? 'addClass' : 'removeClass']('active'); }); }, @@ -315,30 +337,30 @@ if (typeof jQuery === 'undefined') { throw new Error('MDTimePicker: This plugin * Sets the minimum time constraint * @param {string} time Minimum time value */ - setMinTime: function(time) { this.minTime = time }, + setMinTime: function (time) { this.minTime = time }, /** * Sets the maximum time constraint * @param {string} time Maximum time value */ - setMaxTime: function(time) { this.maxTime = time }, + setMaxTime: function (time) { this.maxTime = time }, /** * Sets the disabled digits of the clock * @param {string} view View name */ - setDisabled: function(view) { + setDisabled: function (view) { if (view !== 'hours' && view !== 'minutes') return; var _ = this, clock = this.timepicker.clockHolder.clock; if (view === 'hours') { - clock.hours.find('.mdtp__digit').each(function(i, hEl) { + clock.hours.find('.mdtp__digit').each(function (i, hEl) { var hour = $(hEl), value = parseInt(hour.data('hour')), period = _.selected.getPeriod(), time = new Time(value, 0); - - if (period !== time.getPeriod()) time.invert(); + + if (!_.config.is24hour && period !== time.getPeriod()) time.invert(); var disabled = _.isDisabled(time.getHour(), 0); @@ -347,7 +369,7 @@ if (typeof jQuery === 'undefined') { throw new Error('MDTimePicker: This plugin } if (view === 'minutes') { - clock.minutes.find('.mdtp__digit').each(function(i, mEl) { + clock.minutes.find('.mdtp__digit').each(function (i, mEl) { var minute = $(mEl), value = parseInt(minute.data('minute')), hour = _.selected.getHour(), disabled = _.isDisabled(hour, value); @@ -362,21 +384,21 @@ if (typeof jQuery === 'undefined') { throw new Error('MDTimePicker: This plugin * @param {number} hour Hour value * @param {number} minute Minute value */ - isDisabled: function(hour, minute) { + isDisabled: function (hour, minute) { var _ = this, minT = null, min = null, maxT = null, max = null, now = new Date(), time = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hour, minute, 0, 0), hourView = _.activeView === 'hours'; - if (_.minTime) minT = _.minTime === 'now' ? _.getSystemTime() : _.parseTime(_.minTime); - if (_.maxTime) maxT = _.maxTime === 'now' ? _.getSystemTime() : _.parseTime(_.maxTime); + if (_.minTime) minT = _.minTime === 'now' ? _.getSystemTime() : _.parseTime(_.minTime); + if (_.maxTime) maxT = _.maxTime === 'now' ? _.getSystemTime() : _.parseTime(_.maxTime); if (minT) { - min = new Date(now.getFullYear(), now.getMonth(), now.getDate(), + min = new Date(now.getFullYear(), now.getMonth(), now.getDate(), minT.getHour(), hourView ? 0 : minT.getMinutes(), 0, 0) } if (maxT) { - max = new Date(now.getFullYear(), now.getMonth(), now.getDate(), + max = new Date(now.getFullYear(), now.getMonth(), now.getDate(), maxT.getHour(), hourView ? 0 : maxT.getMinutes(), 0, 0) } @@ -524,7 +546,8 @@ if (typeof jQuery === 'undefined') { throw new Error('MDTimePicker: This plugin that.timepicker.overlay.removeClass('hidden').addClass('animate'); setTimeout(function () { that.timepicker.overlay.removeClass('animate'); - that.timepicker.wrapper.removeClass('animate'); + that.timepicker.wrapper.removeClass('animate') + .focus(); that.visible = true; that.input.blur(); @@ -576,13 +599,16 @@ if (typeof jQuery === 'undefined') { throw new Error('MDTimePicker: This plugin $.fn.mdtimepicker = function () { var mdtp_args = arguments, - arg0 = mdtp_args[0]; + arg0 = mdtp_args[0], + _defaults = $.extend({}, $.fn.mdtimepicker.defaults); + + if (typeof arg0 === 'object' && arg0.is24hour) _defaults.format = 'hh:mm'; return $(this).each(function (idx, el) { var that = this, $that = $(this), picker = $(this).data(MDTP_DATA), - options = $.extend({}, $.fn.mdtimepicker.defaults, $that.data(), typeof arg0 === 'object' && arg0); + options = $.extend({}, _defaults, $that.data(), typeof arg0 === 'object' && arg0); if (!picker) { $that.data(MDTP_DATA, (picker = new MDTimePicker(that, options))); @@ -590,12 +616,6 @@ if (typeof jQuery === 'undefined') { throw new Error('MDTimePicker: This plugin if (typeof arg0 === 'string') picker[arg0].apply(picker, Array.prototype.slice.call(mdtp_args).slice(1)); - - $(document).on('keydown', function (e) { - if (e.keyCode !== 27) return; - - if (picker.visible) picker.hide(); - }); }); } @@ -604,6 +624,7 @@ if (typeof jQuery === 'undefined') { throw new Error('MDTimePicker: This plugin format: 'h:mm tt', // format of the input value theme: 'blue', // theme of the timepicker hourPadding: false, // determines if display value has zero padding for hour value less than 10 (i.e. 05:30 PM); 24-hour format has padding by default - clearBtn: false // determines if clear button is visible + clearBtn: false, // determines if clear button is visible + is24hour: false // determines if the clock will use 24-hour format in the UI }; -}(jQuery); \ No newline at end of file +}); \ No newline at end of file diff --git a/mdtimepicker.min.css b/mdtimepicker.min.css index 870f6c1..872e520 100644 --- a/mdtimepicker.min.css +++ b/mdtimepicker.min.css @@ -1 +1 @@ -@import url(https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap);.mdtp__wrapper,body[mdtimepicker-display=on]{overflow:hidden}.mdtimepicker{position:fixed;top:0;left:0;right:0;bottom:0;font-family:Roboto,sans-serif;font-size:14px;background-color:rgba(10,10,10,.65);transition:background-color .28s ease;z-index:100001}.mdtimepicker.hidden{display:none}.mdtimepicker.animate{background-color:transparent}.mdtp__wrapper{position:absolute;display:flex;flex-direction:column;left:50%;bottom:24px;min-width:280px;opacity:1;user-select:none;border-radius:4px;transform:translateX(-50%) scale(1);box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);transition:transform .28s ease,opacity .28s ease}.mdtp__wrapper.animate{transform:translateX(-50%) scale(1.05);opacity:0}.mdtp__time_holder{display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:46px;padding:20px 24px;color:rgba(255,255,255,.5);text-align:center;background-color:#1565c0}.mdtp__time_holder>span{display:inline-block;line-height:48px;cursor:default}.mdtp__time_holder>span:not(.mdtp__timedots):not(.mdtp__ampm){cursor:pointer;margin:0 4px}.mdtp__time_holder .mdtp__time_h.active,.mdtp__time_holder .mdtp__time_m.active{color:#fafafa}.mdtp__time_holder .mdtp__ampm{font-size:18px}.mdtp__clock_holder{position:relative;background-color:#fff}.mdtp__clock_holder .mdtp__clock{position:relative;width:250px;height:250px;margin:20px;border-radius:50%;background-color:#eee}.mdtp__clock .mdtp__am,.mdtp__clock .mdtp__pm{display:block;position:absolute;bottom:-8px;width:36px;height:36px;line-height:36px;text-align:center;cursor:pointer;border-radius:50%;border:1px solid rgba(0,0,0,.1);background:rgba(0,0,0,.05);transition:background-color .2s ease,color .2s;z-index:3}.mdtp__clock .mdtp__am{left:-8px}.mdtp__clock .mdtp__pm{right:-8px}.mdtp__clock .mdtp__am:hover,.mdtp__clock .mdtp__pm:hover{background-color:rgba(0,0,0,.1)}.mdtp__clock .mdtp__am.active,.mdtp__clock .mdtp__pm.active{color:#fafafa;background-color:#1565c0}.mdtp__clock .mdtp__clock_dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:4px;background-color:#1565c0;border-radius:50%}.mdtp__clock .mdtp__hour_holder,.mdtp__clock .mdtp__minute_holder{position:absolute;top:0;width:100%;height:100%;opacity:1;transform:scale(1);transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s ease;overflow:hidden}.mdtp__clock .mdtp__hour_holder.animate{transform:scale(1.2);opacity:0}.mdtp__clock .mdtp__minute_holder.animate{transform:scale(.8);opacity:0}.mdtp__clock .mdtp__hour_holder.hidden,.mdtp__clock .mdtp__minute_holder.hidden{display:none}.mdtp__clock .mdtp__digit{position:absolute;width:50%;top:50%;left:0;margin-top:-16px;transform-origin:right center;z-index:1}.mdtp__clock .mdtp__digit span{display:inline-block;width:32px;height:32px;line-height:32px;margin-left:8px;text-align:center;border-radius:50%;cursor:pointer;transition:background-color .28s,color .14s}.mdtp__buttons:after,.mdtp__digit.active:before{content:'';display:block}.mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover,.mdtp__digit.active span{background-color:#1565c0!important;color:#fff;z-index:2}.mdtp__digit.digit--disabled span{color:#c8c8c8;cursor:not-allowed;background-color:transparent!important}.mdtp__digit.active:before{position:absolute;top:calc(50% - 1px);right:0;height:2px;width:calc(100% - 40px);background-color:#1565c0}.mdtp__clock .mdtp__minute_holder .mdtp__digit{font-size:13px}.mdtp__clock .mdtp__minute_holder .mdtp__digit:not(.marker){margin-top:-6px;height:12px}.mdtp__clock .mdtp__minute_holder .mdtp__digit:not(.marker).active:before{width:calc(100% - 26px)}.mdtp__clock .mdtp__minute_holder .mdtp__digit:not(.marker) span{width:12px;height:12px;line-height:12px;margin-left:14px}.mdtp__clock .mdtp__minute_holder .mdtp__digit.marker{margin-top:-12px}.mdtp__clock .mdtp__minute_holder .mdtp__digit.marker.active:before{width:calc(100% - 34px)}.mdtp__clock .mdtp__minute_holder .mdtp__digit.marker span{width:24px;height:24px;line-height:24px;margin-left:10px}.mdtp__digit.rotate-6{transform:rotate(6deg)}.mdtp__digit.rotate-6 span{transform:rotate(-6deg)}.mdtp__digit.rotate-12{transform:rotate(12deg)}.mdtp__digit.rotate-12 span{transform:rotate(-12deg)}.mdtp__digit.rotate-18{transform:rotate(18deg)}.mdtp__digit.rotate-18 span{transform:rotate(-18deg)}.mdtp__digit.rotate-24{transform:rotate(24deg)}.mdtp__digit.rotate-24 span{transform:rotate(-24deg)}.mdtp__digit.rotate-30{transform:rotate(30deg)}.mdtp__digit.rotate-30 span{transform:rotate(-30deg)}.mdtp__digit.rotate-36{transform:rotate(36deg)}.mdtp__digit.rotate-36 span{transform:rotate(-36deg)}.mdtp__digit.rotate-42{transform:rotate(42deg)}.mdtp__digit.rotate-42 span{transform:rotate(-42deg)}.mdtp__digit.rotate-48{transform:rotate(48deg)}.mdtp__digit.rotate-48 span{transform:rotate(-48deg)}.mdtp__digit.rotate-54{transform:rotate(54deg)}.mdtp__digit.rotate-54 span{transform:rotate(-54deg)}.mdtp__digit.rotate-60{transform:rotate(60deg)}.mdtp__digit.rotate-60 span{transform:rotate(-60deg)}.mdtp__digit.rotate-66{transform:rotate(66deg)}.mdtp__digit.rotate-66 span{transform:rotate(-66deg)}.mdtp__digit.rotate-72{transform:rotate(72deg)}.mdtp__digit.rotate-72 span{transform:rotate(-72deg)}.mdtp__digit.rotate-78{transform:rotate(78deg)}.mdtp__digit.rotate-78 span{transform:rotate(-78deg)}.mdtp__digit.rotate-84{transform:rotate(84deg)}.mdtp__digit.rotate-84 span{transform:rotate(-84deg)}.mdtp__digit.rotate-90{transform:rotate(90deg)}.mdtp__digit.rotate-90 span{transform:rotate(-90deg)}.mdtp__digit.rotate-96{transform:rotate(96deg)}.mdtp__digit.rotate-96 span{transform:rotate(-96deg)}.mdtp__digit.rotate-102{transform:rotate(102deg)}.mdtp__digit.rotate-102 span{transform:rotate(-102deg)}.mdtp__digit.rotate-108{transform:rotate(108deg)}.mdtp__digit.rotate-108 span{transform:rotate(-108deg)}.mdtp__digit.rotate-114{transform:rotate(114deg)}.mdtp__digit.rotate-114 span{transform:rotate(-114deg)}.mdtp__digit.rotate-120{transform:rotate(120deg)}.mdtp__digit.rotate-120 span{transform:rotate(-120deg)}.mdtp__digit.rotate-126{transform:rotate(126deg)}.mdtp__digit.rotate-126 span{transform:rotate(-126deg)}.mdtp__digit.rotate-132{transform:rotate(132deg)}.mdtp__digit.rotate-132 span{transform:rotate(-132deg)}.mdtp__digit.rotate-138{transform:rotate(138deg)}.mdtp__digit.rotate-138 span{transform:rotate(-138deg)}.mdtp__digit.rotate-144{transform:rotate(144deg)}.mdtp__digit.rotate-144 span{transform:rotate(-144deg)}.mdtp__digit.rotate-150{transform:rotate(150deg)}.mdtp__digit.rotate-150 span{transform:rotate(-150deg)}.mdtp__digit.rotate-156{transform:rotate(156deg)}.mdtp__digit.rotate-156 span{transform:rotate(-156deg)}.mdtp__digit.rotate-162{transform:rotate(162deg)}.mdtp__digit.rotate-162 span{transform:rotate(-162deg)}.mdtp__digit.rotate-168{transform:rotate(168deg)}.mdtp__digit.rotate-168 span{transform:rotate(-168deg)}.mdtp__digit.rotate-174{transform:rotate(174deg)}.mdtp__digit.rotate-174 span{transform:rotate(-174deg)}.mdtp__digit.rotate-180{transform:rotate(180deg)}.mdtp__digit.rotate-180 span{transform:rotate(-180deg)}.mdtp__digit.rotate-186{transform:rotate(186deg)}.mdtp__digit.rotate-186 span{transform:rotate(-186deg)}.mdtp__digit.rotate-192{transform:rotate(192deg)}.mdtp__digit.rotate-192 span{transform:rotate(-192deg)}.mdtp__digit.rotate-198{transform:rotate(198deg)}.mdtp__digit.rotate-198 span{transform:rotate(-198deg)}.mdtp__digit.rotate-204{transform:rotate(204deg)}.mdtp__digit.rotate-204 span{transform:rotate(-204deg)}.mdtp__digit.rotate-210{transform:rotate(210deg)}.mdtp__digit.rotate-210 span{transform:rotate(-210deg)}.mdtp__digit.rotate-216{transform:rotate(216deg)}.mdtp__digit.rotate-216 span{transform:rotate(-216deg)}.mdtp__digit.rotate-222{transform:rotate(222deg)}.mdtp__digit.rotate-222 span{transform:rotate(-222deg)}.mdtp__digit.rotate-228{transform:rotate(228deg)}.mdtp__digit.rotate-228 span{transform:rotate(-228deg)}.mdtp__digit.rotate-234{transform:rotate(234deg)}.mdtp__digit.rotate-234 span{transform:rotate(-234deg)}.mdtp__digit.rotate-240{transform:rotate(240deg)}.mdtp__digit.rotate-240 span{transform:rotate(-240deg)}.mdtp__digit.rotate-246{transform:rotate(246deg)}.mdtp__digit.rotate-246 span{transform:rotate(-246deg)}.mdtp__digit.rotate-252{transform:rotate(252deg)}.mdtp__digit.rotate-252 span{transform:rotate(-252deg)}.mdtp__digit.rotate-258{transform:rotate(258deg)}.mdtp__digit.rotate-258 span{transform:rotate(-258deg)}.mdtp__digit.rotate-264{transform:rotate(264deg)}.mdtp__digit.rotate-264 span{transform:rotate(-264deg)}.mdtp__digit.rotate-270{transform:rotate(270deg)}.mdtp__digit.rotate-270 span{transform:rotate(-270deg)}.mdtp__digit.rotate-276{transform:rotate(276deg)}.mdtp__digit.rotate-276 span{transform:rotate(-276deg)}.mdtp__digit.rotate-282{transform:rotate(282deg)}.mdtp__digit.rotate-282 span{transform:rotate(-282deg)}.mdtp__digit.rotate-288{transform:rotate(288deg)}.mdtp__digit.rotate-288 span{transform:rotate(-288deg)}.mdtp__digit.rotate-294{transform:rotate(294deg)}.mdtp__digit.rotate-294 span{transform:rotate(-294deg)}.mdtp__digit.rotate-300{transform:rotate(300deg)}.mdtp__digit.rotate-300 span{transform:rotate(-300deg)}.mdtp__digit.rotate-306{transform:rotate(306deg)}.mdtp__digit.rotate-306 span{transform:rotate(-306deg)}.mdtp__digit.rotate-312{transform:rotate(312deg)}.mdtp__digit.rotate-312 span{transform:rotate(-312deg)}.mdtp__digit.rotate-318{transform:rotate(318deg)}.mdtp__digit.rotate-318 span{transform:rotate(-318deg)}.mdtp__digit.rotate-324{transform:rotate(324deg)}.mdtp__digit.rotate-324 span{transform:rotate(-324deg)}.mdtp__digit.rotate-330{transform:rotate(330deg)}.mdtp__digit.rotate-330 span{transform:rotate(-330deg)}.mdtp__digit.rotate-336{transform:rotate(336deg)}.mdtp__digit.rotate-336 span{transform:rotate(-336deg)}.mdtp__digit.rotate-342{transform:rotate(342deg)}.mdtp__digit.rotate-342 span{transform:rotate(-342deg)}.mdtp__digit.rotate-348{transform:rotate(348deg)}.mdtp__digit.rotate-348 span{transform:rotate(-348deg)}.mdtp__digit.rotate-354{transform:rotate(354deg)}.mdtp__digit.rotate-354 span{transform:rotate(-354deg)}.mdtp__digit.rotate-360{transform:rotate(360deg)}.mdtp__digit.rotate-360 span{transform:rotate(-360deg)}.mdtp__buttons{padding:0 10px 10px;text-align:right}.mdtp__buttons:after{clear:both}.mdtp__button{display:inline-block;padding:0 16px;min-width:40px;text-align:center;text-transform:uppercase;line-height:32px;font-weight:500;cursor:pointer;color:#1565c0;border-radius:4px;transition:background-color .2s linear}.mdtp__button:hover{background-color:rgba(0,0,0,.1)}.mdtp__button:active{background-color:rgba(0,0,0,.2)}.mdtp__button.clear-btn{float:left;color:#ef5350!important}.mdtp__wrapper[data-theme=blue] .mdtp__clock .mdtp__am.active,.mdtp__wrapper[data-theme=blue] .mdtp__clock .mdtp__clock_dot,.mdtp__wrapper[data-theme=blue] .mdtp__clock .mdtp__pm.active,.mdtp__wrapper[data-theme=blue] .mdtp__time_holder{background-color:#1565c0}.mdtp__wrapper[data-theme=blue] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover,.mdtp__wrapper[data-theme=blue] .mdtp__digit.active span{background-color:#1565c0!important}.mdtp__wrapper[data-theme=blue] .mdtp__digit.active:before{background-color:#1565c0}.mdtp__wrapper[data-theme=blue] .mdtp__button{color:#1565c0}.mdtp__wrapper[data-theme=red] .mdtp__clock .mdtp__am.active,.mdtp__wrapper[data-theme=red] .mdtp__clock .mdtp__clock_dot,.mdtp__wrapper[data-theme=red] .mdtp__clock .mdtp__pm.active,.mdtp__wrapper[data-theme=red] .mdtp__time_holder{background-color:#c62828}.mdtp__wrapper[data-theme=red] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover,.mdtp__wrapper[data-theme=red] .mdtp__digit.active span{background-color:#c62828!important}.mdtp__wrapper[data-theme=red] .mdtp__digit.active:before{background-color:#c62828}.mdtp__wrapper[data-theme=red] .mdtp__button{color:#c62828}.mdtp__wrapper[data-theme=purple] .mdtp__clock .mdtp__am.active,.mdtp__wrapper[data-theme=purple] .mdtp__clock .mdtp__clock_dot,.mdtp__wrapper[data-theme=purple] .mdtp__clock .mdtp__pm.active,.mdtp__wrapper[data-theme=purple] .mdtp__time_holder{background-color:#6a1b9a}.mdtp__wrapper[data-theme=purple] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover,.mdtp__wrapper[data-theme=purple] .mdtp__digit.active span{background-color:#6a1b9a!important}.mdtp__wrapper[data-theme=purple] .mdtp__digit.active:before{background-color:#6a1b9a}.mdtp__wrapper[data-theme=purple] .mdtp__button{color:#6a1b9a}.mdtp__wrapper[data-theme=indigo] .mdtp__clock .mdtp__am.active,.mdtp__wrapper[data-theme=indigo] .mdtp__clock .mdtp__clock_dot,.mdtp__wrapper[data-theme=indigo] .mdtp__clock .mdtp__pm.active,.mdtp__wrapper[data-theme=indigo] .mdtp__time_holder{background-color:#283593}.mdtp__wrapper[data-theme=indigo] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover,.mdtp__wrapper[data-theme=indigo] .mdtp__digit.active span{background-color:#283593!important}.mdtp__wrapper[data-theme=indigo] .mdtp__digit.active:before{background-color:#283593}.mdtp__wrapper[data-theme=indigo] .mdtp__button{color:#283593}.mdtp__wrapper[data-theme=teal] .mdtp__clock .mdtp__am.active,.mdtp__wrapper[data-theme=teal] .mdtp__clock .mdtp__clock_dot,.mdtp__wrapper[data-theme=teal] .mdtp__clock .mdtp__pm.active,.mdtp__wrapper[data-theme=teal] .mdtp__time_holder{background-color:#00695c}.mdtp__wrapper[data-theme=teal] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover,.mdtp__wrapper[data-theme=teal] .mdtp__digit.active span{background-color:#00695c!important}.mdtp__wrapper[data-theme=teal] .mdtp__digit.active:before{background-color:#00695c}.mdtp__wrapper[data-theme=teal] .mdtp__button{color:#00695c}.mdtp__wrapper[data-theme=green] .mdtp__clock .mdtp__am.active,.mdtp__wrapper[data-theme=green] .mdtp__clock .mdtp__clock_dot,.mdtp__wrapper[data-theme=green] .mdtp__clock .mdtp__pm.active,.mdtp__wrapper[data-theme=green] .mdtp__time_holder{background-color:#2e7d32}.mdtp__wrapper[data-theme=green] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover,.mdtp__wrapper[data-theme=green] .mdtp__digit.active span{background-color:#2e7d32!important}.mdtp__wrapper[data-theme=green] .mdtp__digit.active:before{background-color:#2e7d32}.mdtp__wrapper[data-theme=green] .mdtp__button{color:#2e7d32}.mdtp__wrapper[data-theme=dark] .mdtp__time_holder{background-color:#121212}.mdtp__wrapper[data-theme=dark] .mdtp__clock_holder{background-color:#1d1d1d}.mdtp__wrapper[data-theme=dark] .mdtp__clock_holder .mdtp__clock{background-color:#181818}.mdtp__wrapper[data-theme=dark] .mdtp__clock .mdtp__digit:not(.digit--disabled){color:rgba(255,255,255,.87)}.mdtp__wrapper[data-theme=dark] .mdtp__clock .mdtp__digit.digit--disabled span{color:rgba(100,100,100,.87)}.mdtp__wrapper[data-theme=dark] .mdtp__clock .mdtp__am:not(.active),.mdtp__wrapper[data-theme=dark] .mdtp__clock .mdtp__pm:not(.active){color:rgba(255,255,255,.87);background-color:rgba(200,200,200,.05)}.mdtp__wrapper[data-theme=dark] .mdtp__button{color:#42a5f5}.mdtp__wrapper[data-theme=dark] .mdtp__button:hover{background-color:rgba(255,255,255,.04)}.mdtp__wrapper[data-theme=dark] .mdtp__button:active{background-color:rgba(255,255,255,.1)}@media (max-height:360px){.mdtp__wrapper{flex-direction:row;bottom:8px}.mdtp__time_holder{width:160px;padding:20px}.mdtp__clock_holder{padding:16px}.mdtp__clock .mdtp__am,.mdtp__clock .mdtp__pm{bottom:-4px}.mdtp__clock .mdtp__am{left:-4px}.mdtp__clock .mdtp__pm{right:-4px}}@media (max-height:320px){.mdtp__wrapper{bottom:0}} \ No newline at end of file +@import url(https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap);body[mdtimepicker-display='on']{overflow:hidden}.mdtimepicker{position:fixed;top:0;left:0;right:0;bottom:0;font-family:Roboto,sans-serif;font-size:14px;background-color:rgba(10,10,10,.65);transition:background-color .28s ease;z-index:100001}.mdtimepicker.hidden{display:none}.mdtimepicker.animate{background-color:transparent}.mdtp__wrapper{position:absolute;display:flex;flex-direction:column;left:50%;bottom:24px;min-width:280px;opacity:1;outline:none;user-select:none;border-radius:4px;transform:translateX(-50%) scale(1);box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);transition:transform .28s ease,opacity .28s ease;overflow:hidden}.mdtp__wrapper.animate{transform:translateX(-50%) scale(1.05);opacity:0}.mdtp__time_holder{display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:46px;padding:20px 24px;color:rgba(255,255,255,.5);text-align:center;background-color:#1565c0}.mdtp__time_holder>span{display:inline-block;line-height:48px;cursor:default}.mdtp__time_holder>span:not(.mdtp__timedots):not(.mdtp__ampm){cursor:pointer;margin:0 4px}.mdtp__time_holder .mdtp__time_h.active,.mdtp__time_holder .mdtp__time_m.active{color:#fafafa}.mdtp__time_holder .mdtp__ampm{font-size:18px}.mdtp__clock_holder{position:relative;background-color:#fff}.mdtp__clock_holder .mdtp__clock{position:relative;width:250px;height:250px;margin:20px;border-radius:50%;background-color:#eee}.mdtp__clock .mdtp__am,.mdtp__clock .mdtp__pm{display:block;position:absolute;bottom:-8px;width:36px;height:36px;line-height:36px;text-align:center;cursor:pointer;border-radius:50%;border:1px solid rgba(0,0,0,.1);background:rgba(0,0,0,.05);transition:background-color .2s ease,color .2s;z-index:3}.mdtp__clock .mdtp__am{left:-8px}.mdtp__clock .mdtp__pm{right:-8px}.mdtp__clock .mdtp__am:hover,.mdtp__clock .mdtp__pm:hover{background-color:rgba(0,0,0,.1)}.mdtp__clock .mdtp__am.active,.mdtp__clock .mdtp__pm.active{color:#fafafa;background-color:#1565c0}.mdtp__clock .mdtp__clock_dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:4px;background-color:#1565c0;border-radius:50%}.mdtp__clock .mdtp__hour_holder,.mdtp__clock .mdtp__minute_holder{position:absolute;top:0;width:100%;height:100%;opacity:1;transform:scale(1);transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s ease;overflow:hidden}.mdtp__clock .mdtp__hour_holder.animate{transform:scale(1.2);opacity:0}.mdtp__clock .mdtp__minute_holder.animate{transform:scale(.8);opacity:0}.mdtp__clock .mdtp__hour_holder.hidden,.mdtp__clock .mdtp__minute_holder.hidden{display:none}.mdtp__clock .mdtp__digit{position:absolute;width:50%;top:50%;left:0;margin-top:-16px;transform-origin:right center;z-index:1}.mdtp__clock .mdtp__digit.inner--digit{width:36%;left:14%;z-index:2}.mdtp__clock .mdtp__digit span{display:inline-block;width:32px;height:32px;line-height:32px;margin-left:8px;text-align:center;border-radius:50%;cursor:pointer;transition:background-color .28s,color .14s}.mdtp__digit.active span,.mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover{background-color:#1565c0!important;color:#fff;z-index:2}.mdtp__digit.digit--disabled span{color:rgb(200,200,200);cursor:not-allowed;background-color:transparent!important}.mdtp__digit.active:before{content:'';display:block;position:absolute;top:calc(50% - 1px);right:0;height:2px;width:calc(100% - 40px);background-color:#1565c0}.mdtp__clock .mdtp__minute_holder .mdtp__digit{font-size:13px}.mdtp__clock .mdtp__minute_holder .mdtp__digit:not(.marker){margin-top:-6px;height:12px}.mdtp__clock .mdtp__minute_holder .mdtp__digit:not(.marker).active:before{width:calc(100% - 26px)}.mdtp__clock .mdtp__minute_holder .mdtp__digit:not(.marker) span{width:12px;height:12px;line-height:12px;margin-left:14px}.mdtp__clock .mdtp__minute_holder .mdtp__digit.marker{margin-top:-12px}.mdtp__clock .mdtp__minute_holder .mdtp__digit.marker.active:before{width:calc(100% - 34px)}.mdtp__clock .mdtp__minute_holder .mdtp__digit.marker span{width:24px;height:24px;line-height:24px;margin-left:10px}.mdtp__digit.rotate--15{transform:rotate(-15deg)}.mdtp__digit.rotate--15 span{transform:rotate(15deg)}.mdtp__digit.rotate-6{transform:rotate(6deg)}.mdtp__digit.rotate-6 span{transform:rotate(-6deg)}.mdtp__digit.rotate-12{transform:rotate(12deg)}.mdtp__digit.rotate-12 span{transform:rotate(-12deg)}.mdtp__digit.rotate-15{transform:rotate(15deg)}.mdtp__digit.rotate-15 span{transform:rotate(-15deg)}.mdtp__digit.rotate-18{transform:rotate(18deg)}.mdtp__digit.rotate-18 span{transform:rotate(-18deg)}.mdtp__digit.rotate-24{transform:rotate(24deg)}.mdtp__digit.rotate-24 span{transform:rotate(-24deg)}.mdtp__digit.rotate-30{transform:rotate(30deg)}.mdtp__digit.rotate-30 span{transform:rotate(-30deg)}.mdtp__digit.rotate-36{transform:rotate(36deg)}.mdtp__digit.rotate-36 span{transform:rotate(-36deg)}.mdtp__digit.rotate-42{transform:rotate(42deg)}.mdtp__digit.rotate-42 span{transform:rotate(-42deg)}.mdtp__digit.rotate-45{transform:rotate(45deg)}.mdtp__digit.rotate-45 span{transform:rotate(-45deg)}.mdtp__digit.rotate-48{transform:rotate(48deg)}.mdtp__digit.rotate-48 span{transform:rotate(-48deg)}.mdtp__digit.rotate-54{transform:rotate(54deg)}.mdtp__digit.rotate-54 span{transform:rotate(-54deg)}.mdtp__digit.rotate-60{transform:rotate(60deg)}.mdtp__digit.rotate-60 span{transform:rotate(-60deg)}.mdtp__digit.rotate-66{transform:rotate(66deg)}.mdtp__digit.rotate-66 span{transform:rotate(-66deg)}.mdtp__digit.rotate-72{transform:rotate(72deg)}.mdtp__digit.rotate-72 span{transform:rotate(-72deg)}.mdtp__digit.rotate-75{transform:rotate(75deg)}.mdtp__digit.rotate-75 span{transform:rotate(-75deg)}.mdtp__digit.rotate-78{transform:rotate(78deg)}.mdtp__digit.rotate-78 span{transform:rotate(-78deg)}.mdtp__digit.rotate-84{transform:rotate(84deg)}.mdtp__digit.rotate-84 span{transform:rotate(-84deg)}.mdtp__digit.rotate-90{transform:rotate(90deg)}.mdtp__digit.rotate-90 span{transform:rotate(-90deg)}.mdtp__digit.rotate-96{transform:rotate(96deg)}.mdtp__digit.rotate-96 span{transform:rotate(-96deg)}.mdtp__digit.rotate-102{transform:rotate(102deg)}.mdtp__digit.rotate-102 span{transform:rotate(-102deg)}.mdtp__digit.rotate-105{transform:rotate(105deg)}.mdtp__digit.rotate-105 span{transform:rotate(-105deg)}.mdtp__digit.rotate-108{transform:rotate(108deg)}.mdtp__digit.rotate-108 span{transform:rotate(-108deg)}.mdtp__digit.rotate-114{transform:rotate(114deg)}.mdtp__digit.rotate-114 span{transform:rotate(-114deg)}.mdtp__digit.rotate-120{transform:rotate(120deg)}.mdtp__digit.rotate-120 span{transform:rotate(-120deg)}.mdtp__digit.rotate-126{transform:rotate(126deg)}.mdtp__digit.rotate-126 span{transform:rotate(-126deg)}.mdtp__digit.rotate-132{transform:rotate(132deg)}.mdtp__digit.rotate-132 span{transform:rotate(-132deg)}.mdtp__digit.rotate-135{transform:rotate(135deg)}.mdtp__digit.rotate-135 span{transform:rotate(-135deg)}.mdtp__digit.rotate-138{transform:rotate(138deg)}.mdtp__digit.rotate-138 span{transform:rotate(-138deg)}.mdtp__digit.rotate-144{transform:rotate(144deg)}.mdtp__digit.rotate-144 span{transform:rotate(-144deg)}.mdtp__digit.rotate-150{transform:rotate(150deg)}.mdtp__digit.rotate-150 span{transform:rotate(-150deg)}.mdtp__digit.rotate-156{transform:rotate(156deg)}.mdtp__digit.rotate-156 span{transform:rotate(-156deg)}.mdtp__digit.rotate-162{transform:rotate(162deg)}.mdtp__digit.rotate-162 span{transform:rotate(-162deg)}.mdtp__digit.rotate-165{transform:rotate(165deg)}.mdtp__digit.rotate-165 span{transform:rotate(-165deg)}.mdtp__digit.rotate-168{transform:rotate(168deg)}.mdtp__digit.rotate-168 span{transform:rotate(-168deg)}.mdtp__digit.rotate-174{transform:rotate(174deg)}.mdtp__digit.rotate-174 span{transform:rotate(-174deg)}.mdtp__digit.rotate-180{transform:rotate(180deg)}.mdtp__digit.rotate-180 span{transform:rotate(-180deg)}.mdtp__digit.rotate-186{transform:rotate(186deg)}.mdtp__digit.rotate-186 span{transform:rotate(-186deg)}.mdtp__digit.rotate-192{transform:rotate(192deg)}.mdtp__digit.rotate-192 span{transform:rotate(-192deg)}.mdtp__digit.rotate-195{transform:rotate(195deg)}.mdtp__digit.rotate-195 span{transform:rotate(-195deg)}.mdtp__digit.rotate-198{transform:rotate(198deg)}.mdtp__digit.rotate-198 span{transform:rotate(-198deg)}.mdtp__digit.rotate-204{transform:rotate(204deg)}.mdtp__digit.rotate-204 span{transform:rotate(-204deg)}.mdtp__digit.rotate-210{transform:rotate(210deg)}.mdtp__digit.rotate-210 span{transform:rotate(-210deg)}.mdtp__digit.rotate-216{transform:rotate(216deg)}.mdtp__digit.rotate-216 span{transform:rotate(-216deg)}.mdtp__digit.rotate-222{transform:rotate(222deg)}.mdtp__digit.rotate-222 span{transform:rotate(-222deg)}.mdtp__digit.rotate-225{transform:rotate(225deg)}.mdtp__digit.rotate-225 span{transform:rotate(-225deg)}.mdtp__digit.rotate-228{transform:rotate(228deg)}.mdtp__digit.rotate-228 span{transform:rotate(-228deg)}.mdtp__digit.rotate-234{transform:rotate(234deg)}.mdtp__digit.rotate-234 span{transform:rotate(-234deg)}.mdtp__digit.rotate-240{transform:rotate(240deg)}.mdtp__digit.rotate-240 span{transform:rotate(-240deg)}.mdtp__digit.rotate-246{transform:rotate(246deg)}.mdtp__digit.rotate-246 span{transform:rotate(-246deg)}.mdtp__digit.rotate-252{transform:rotate(252deg)}.mdtp__digit.rotate-252 span{transform:rotate(-252deg)}.mdtp__digit.rotate-255{transform:rotate(255deg)}.mdtp__digit.rotate-255 span{transform:rotate(-255deg)}.mdtp__digit.rotate-258{transform:rotate(258deg)}.mdtp__digit.rotate-258 span{transform:rotate(-258deg)}.mdtp__digit.rotate-264{transform:rotate(264deg)}.mdtp__digit.rotate-264 span{transform:rotate(-264deg)}.mdtp__digit.rotate-270{transform:rotate(270deg)}.mdtp__digit.rotate-270 span{transform:rotate(-270deg)}.mdtp__digit.rotate-276{transform:rotate(276deg)}.mdtp__digit.rotate-276 span{transform:rotate(-276deg)}.mdtp__digit.rotate-282{transform:rotate(282deg)}.mdtp__digit.rotate-282 span{transform:rotate(-282deg)}.mdtp__digit.rotate-285{transform:rotate(285deg)}.mdtp__digit.rotate-285 span{transform:rotate(-285deg)}.mdtp__digit.rotate-288{transform:rotate(288deg)}.mdtp__digit.rotate-288 span{transform:rotate(-288deg)}.mdtp__digit.rotate-294{transform:rotate(294deg)}.mdtp__digit.rotate-294 span{transform:rotate(-294deg)}.mdtp__digit.rotate-300{transform:rotate(300deg)}.mdtp__digit.rotate-300 span{transform:rotate(-300deg)}.mdtp__digit.rotate-306{transform:rotate(306deg)}.mdtp__digit.rotate-306 span{transform:rotate(-306deg)}.mdtp__digit.rotate-312{transform:rotate(312deg)}.mdtp__digit.rotate-312 span{transform:rotate(-312deg)}.mdtp__digit.rotate-315{transform:rotate(315deg)}.mdtp__digit.rotate-315 span{transform:rotate(-315deg)}.mdtp__digit.rotate-318{transform:rotate(318deg)}.mdtp__digit.rotate-318 span{transform:rotate(-318deg)}.mdtp__digit.rotate-324{transform:rotate(324deg)}.mdtp__digit.rotate-324 span{transform:rotate(-324deg)}.mdtp__digit.rotate-330{transform:rotate(330deg)}.mdtp__digit.rotate-330 span{transform:rotate(-330deg)}.mdtp__digit.rotate-336{transform:rotate(336deg)}.mdtp__digit.rotate-336 span{transform:rotate(-336deg)}.mdtp__digit.rotate-342{transform:rotate(342deg)}.mdtp__digit.rotate-342 span{transform:rotate(-342deg)}.mdtp__digit.rotate-348{transform:rotate(348deg)}.mdtp__digit.rotate-348 span{transform:rotate(-348deg)}.mdtp__digit.rotate-354{transform:rotate(354deg)}.mdtp__digit.rotate-354 span{transform:rotate(-354deg)}.mdtp__digit.rotate-360{transform:rotate(360deg)}.mdtp__digit.rotate-360 span{transform:rotate(-360deg)}.mdtp__buttons{padding:0 10px 10px;text-align:right}.mdtp__buttons:after{content:'';display:block;clear:both}.mdtp__button{display:inline-block;padding:0 16px;min-width:40px;text-align:center;text-transform:uppercase;line-height:32px;font-weight:500;cursor:pointer;color:#1565c0;border-radius:4px;transition:background-color .2s linear}.mdtp__button:hover{background-color:rgba(0,0,0,.1)}.mdtp__button:active{background-color:rgba(0,0,0,.2)}.mdtp__button.clear-btn{float:left;color:#ef5350!important}.mdtp__wrapper[data-theme='blue'] .mdtp__time_holder{background-color:#1565c0}.mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__am.active,.mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__pm.active{background-color:#1565c0}.mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__clock_dot{background-color:#1565c0}.mdtp__wrapper[data-theme='blue'] .mdtp__digit.active span,.mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover{background-color:#1565c0!important}.mdtp__wrapper[data-theme='blue'] .mdtp__digit.active:before{background-color:#1565c0}.mdtp__wrapper[data-theme='blue'] .mdtp__button{color:#1565c0}.mdtp__wrapper[data-theme='red'] .mdtp__time_holder{background-color:#c62828}.mdtp__wrapper[data-theme='red'] .mdtp__clock .mdtp__am.active,.mdtp__wrapper[data-theme='red'] .mdtp__clock .mdtp__pm.active{background-color:#c62828}.mdtp__wrapper[data-theme='red'] .mdtp__clock .mdtp__clock_dot{background-color:#c62828}.mdtp__wrapper[data-theme='red'] .mdtp__digit.active span,.mdtp__wrapper[data-theme='red'] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover{background-color:#c62828!important}.mdtp__wrapper[data-theme='red'] .mdtp__digit.active:before{background-color:#c62828}.mdtp__wrapper[data-theme='red'] .mdtp__button{color:#c62828}.mdtp__wrapper[data-theme='purple'] .mdtp__time_holder{background-color:#6a1b9a}.mdtp__wrapper[data-theme='purple'] .mdtp__clock .mdtp__am.active,.mdtp__wrapper[data-theme='purple'] .mdtp__clock .mdtp__pm.active{background-color:#6a1b9a}.mdtp__wrapper[data-theme='purple'] .mdtp__clock .mdtp__clock_dot{background-color:#6a1b9a}.mdtp__wrapper[data-theme='purple'] .mdtp__digit.active span,.mdtp__wrapper[data-theme='purple'] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover{background-color:#6a1b9a!important}.mdtp__wrapper[data-theme='purple'] .mdtp__digit.active:before{background-color:#6a1b9a}.mdtp__wrapper[data-theme='purple'] .mdtp__button{color:#6a1b9a}.mdtp__wrapper[data-theme='indigo'] .mdtp__time_holder{background-color:#283593}.mdtp__wrapper[data-theme='indigo'] .mdtp__clock .mdtp__am.active,.mdtp__wrapper[data-theme='indigo'] .mdtp__clock .mdtp__pm.active{background-color:#283593}.mdtp__wrapper[data-theme='indigo'] .mdtp__clock .mdtp__clock_dot{background-color:#283593}.mdtp__wrapper[data-theme='indigo'] .mdtp__digit.active span,.mdtp__wrapper[data-theme='indigo'] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover{background-color:#283593!important}.mdtp__wrapper[data-theme='indigo'] .mdtp__digit.active:before{background-color:#283593}.mdtp__wrapper[data-theme='indigo'] .mdtp__button{color:#283593}.mdtp__wrapper[data-theme='teal'] .mdtp__time_holder{background-color:#00695c}.mdtp__wrapper[data-theme='teal'] .mdtp__clock .mdtp__am.active,.mdtp__wrapper[data-theme='teal'] .mdtp__clock .mdtp__pm.active{background-color:#00695c}.mdtp__wrapper[data-theme='teal'] .mdtp__clock .mdtp__clock_dot{background-color:#00695c}.mdtp__wrapper[data-theme='teal'] .mdtp__digit.active span,.mdtp__wrapper[data-theme='teal'] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover{background-color:#00695c!important}.mdtp__wrapper[data-theme='teal'] .mdtp__digit.active:before{background-color:#00695c}.mdtp__wrapper[data-theme='teal'] .mdtp__button{color:#00695c}.mdtp__wrapper[data-theme='green'] .mdtp__time_holder{background-color:#2e7d32}.mdtp__wrapper[data-theme='green'] .mdtp__clock .mdtp__am.active,.mdtp__wrapper[data-theme='green'] .mdtp__clock .mdtp__pm.active{background-color:#2e7d32}.mdtp__wrapper[data-theme='green'] .mdtp__clock .mdtp__clock_dot{background-color:#2e7d32}.mdtp__wrapper[data-theme='green'] .mdtp__digit.active span,.mdtp__wrapper[data-theme='green'] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover{background-color:#2e7d32!important}.mdtp__wrapper[data-theme='green'] .mdtp__digit.active:before{background-color:#2e7d32}.mdtp__wrapper[data-theme='green'] .mdtp__button{color:#2e7d32}.mdtp__wrapper[data-theme='dark'] .mdtp__time_holder{background-color:#121212}.mdtp__wrapper[data-theme='dark'] .mdtp__clock_holder{background-color:rgb(29,29,29)}.mdtp__wrapper[data-theme='dark'] .mdtp__clock_holder .mdtp__clock{background-color:rgb(24,24,24)}.mdtp__wrapper[data-theme='dark'] .mdtp__clock .mdtp__digit:not(.digit--disabled){color:rgba(255,255,255,.87)}.mdtp__wrapper[data-theme='dark'] .mdtp__clock .mdtp__digit.digit--disabled span{color:rgba(100,100,100,.87)}.mdtp__wrapper[data-theme='dark'] .mdtp__clock .mdtp__am:not(.active),.mdtp__wrapper[data-theme='dark'] .mdtp__clock .mdtp__pm:not(.active){color:rgba(255,255,255,.87);background-color:rgba(200,200,200,.05)}.mdtp__wrapper[data-theme='dark'] .mdtp__button{color:#42a5f5}.mdtp__wrapper[data-theme='dark'] .mdtp__button:hover{background-color:rgba(255,255,255,.04)}.mdtp__wrapper[data-theme='dark'] .mdtp__button:active{background-color:rgba(255,255,255,.1)}@media (max-height:360px){.mdtp__wrapper{flex-direction:row;bottom:8px}.mdtp__time_holder{width:160px;padding:20px}.mdtp__clock .mdtp__am,.mdtp__clock .mdtp__pm{bottom:-4px}.mdtp__clock .mdtp__am{left:-4px}.mdtp__clock .mdtp__pm{right:-4px}}@media (max-height:320px){.mdtp__wrapper{bottom:0}} \ No newline at end of file diff --git a/mdtimepicker.min.js b/mdtimepicker.min.js index cfd1460..ac6cf42 100644 --- a/mdtimepicker.min.js +++ b/mdtimepicker.min.js @@ -1,11 +1,11 @@ /* -- DO NOT REMOVE -- - * jQuery MDTimePicker v1.0 plugin + * jQuery MDTimePicker v1.0.2 plugin + * /~https://github.com/dmuy/MDTimePicker * * Author: Dionlee Uy * Email: dionleeuy@gmail.com * - * Date: Tuesday, August 28 2017 - * * @requires jQuery - * -- DO NOT REMOVE -- */ -if("undefined"==typeof jQuery)throw new Error("MDTimePicker: This plugin requires jQuery");+function(e){var t="mdtimepicker",i=120,s=90,n=360,r=30,a=6,o=[9,112,113,114,115,116,117,118,119,120,121,122,123],c=function(t,i){this.hour=t,this.minute=i,this.format=function(t,i){var s=this,n=(t.match(/h/g)||[]).length>1;return e.trim(t.replace(/(hh|h|mm|ss|tt|t)/g,function(e){switch(e.toLowerCase()){case"h":var t=s.getHour(!0);return i&&10>t?"0"+t:t;case"hh":return s.hour<10?"0"+s.hour:s.hour;case"mm":return s.minute<10?"0"+s.minute:s.minute;case"ss":return"00";case"t":return n?"":s.getPeriod().toLowerCase();case"tt":return n?"":s.getPeriod()}}))},this.setHour=function(e){this.hour=e},this.getHour=function(e){return e?[0,12].indexOf(this.hour)>=0?12:this.hour%12:this.hour},this.invert=function(){"AM"===this.getPeriod()?this.setHour(this.getHour()+12):this.setHour(this.getHour()-12)},this.setMinutes=function(e){this.minute=e},this.getMinutes=function(){return this.minute},this.getPeriod=function(){return this.hour<12?"AM":"PM"}},d=function(t,i){var s=this;this.visible=!1,this.activeView="hours",this.hTimeout=null,this.mTimeout=null,this.input=e(t),this.config=i,this.time=new c(0,0),this.selected=new c(0,0),this.timepicker={overlay:e(''),wrapper:e('
'),timeHolder:{wrapper:e('
'),hour:e('12'),dots:e(':'),minute:e('00'),am_pm:e('AM')},clockHolder:{wrapper:e('
'),am:e('AM'),pm:e('PM'),clock:{wrapper:e('
'),dot:e(''),hours:e('
'),minutes:e('
')},buttonsHolder:{wrapper:e('
'),btnClear:e('Clear'),btnOk:e('Ok'),btnCancel:e('Cancel')}}},this.setMinTime(this.input.data("mintime")||this.config.minTime),this.setMaxTime(this.input.data("maxtime")||this.config.maxTime);var n=s.timepicker;if(s.setup().appendTo("body"),n.overlay.click(function(){s.hide()}),n.wrapper.click(function(e){e.stopPropagation()}),n.clockHolder.am.click(function(){"AM"!==s.selected.getPeriod()&&s.setPeriod("am")}),n.clockHolder.pm.click(function(){"PM"!==s.selected.getPeriod()&&s.setPeriod("pm")}),n.timeHolder.hour.click(function(){"hours"!==s.activeView&&s.switchView("hours")}),n.timeHolder.minute.click(function(){"minutes"!==s.activeView&&s.switchView("minutes")}),n.clockHolder.buttonsHolder.btnOk.click(function(){var e=s.selected;if(!s.isDisabled(e.getHour(),e.getMinutes())){s.setValue(e);var t=s.getFormattedTime();s.triggerChange({time:t.time,value:t.value}),s.hide()}}),n.clockHolder.buttonsHolder.btnCancel.click(function(){s.hide()}),s.config.clearBtn&&n.clockHolder.buttonsHolder.btnClear.click(function(){s.input.val("").attr("data-time",null).attr("value",""),s.triggerChange({time:null,value:""}),s.hide()}),s.input.on("keydown",function(e){return 13===e.keyCode&&s.show(),!(o.indexOf(e.which)<0&&s.config.readOnly)}).on("click",function(){s.show()}).prop("readonly",!0),""!==s.input.val()){var r=s.parseTime(s.input.val(),s.config.format);s.setValue(r)}else{var r=s.getSystemTime();s.time=new c(r.hour,r.minute)}s.resetSelected(),s.switchView(s.activeView)};d.prototype={constructor:d,setup:function(){var t=this,o=t.timepicker,c=o.overlay,d=o.wrapper,u=o.timeHolder,m=o.clockHolder;u.wrapper.append(u.hour).append(u.dots).append(u.minute).append(u.am_pm).appendTo(d);for(var l=0;12>l;l++){var p=l+1,h=(i+l*r)%n,f=e('
'+p+"
");f.find("span").click(function(){var i=parseInt(e(this).parent().data("hour")),s=t.selected.getPeriod(),n=(i+("PM"===s&&12>i||"AM"===s&&12===i?12:0))%24,r=t.isDisabled(n,0);r||(t.setHour(n),t.switchView("minutes"))}),m.clock.hours.append(f)}for(var l=0;60>l;l++){var v=10>l?"0"+l:l,h=(s+l*a)%n,g=e('
');l%5===0?g.addClass("marker").html(""+v+""):g.html(""),g.find("span").click(function(){var i=parseInt(e(this).parent().data("minute")),s=t.selected.getHour(),n=t.isDisabled(s,i);n||t.setMinute(i)}),m.clock.minutes.append(g)}return m.clock.wrapper.append(m.am).append(m.pm).append(m.clock.dot).append(m.clock.hours).append(m.clock.minutes).appendTo(m.wrapper),t.config.clearBtn&&m.buttonsHolder.wrapper.append(m.buttonsHolder.btnClear),m.buttonsHolder.wrapper.append(m.buttonsHolder.btnCancel).append(m.buttonsHolder.btnOk).appendTo(m.wrapper),m.wrapper.appendTo(d),d.attr("data-theme",t.input.data("theme")||t.config.theme||e.fn.mdtimepicker.defaults.theme),d.appendTo(c),c},setHour:function(t){if("undefined"==typeof t)throw new Error("Expecting a value.");var i=this;this.selected.setHour(t),this.timepicker.timeHolder.hour.text(this.selected.getHour(!0)),this.timepicker.clockHolder.clock.hours.children("div").each(function(t,s){var n=e(s),r=n.data("hour");n[r===i.selected.getHour(!0)?"addClass":"removeClass"]("active")})},setMinute:function(t){if("undefined"==typeof t)throw new Error("Expecting a value.");this.selected.setMinutes(t),this.timepicker.timeHolder.minute.text(10>t?"0"+t:t),this.timepicker.clockHolder.clock.minutes.children("div").each(function(i,s){var n=e(s),r=n.data("minute");n[r===t?"addClass":"removeClass"]("active")})},setPeriod:function(e){if("undefined"==typeof e)throw new Error("Expecting a value.");this.selected.getPeriod()!==e.toUpperCase()&&this.selected.invert();var t=this.selected.getPeriod();this.setDisabled(this.activeView),this.timepicker.timeHolder.am_pm.text(t),this.timepicker.clockHolder.am["AM"===t?"addClass":"removeClass"]("active"),this.timepicker.clockHolder.pm["PM"===t?"addClass":"removeClass"]("active")},setValue:function(e){if("undefined"==typeof e)throw new Error("Expecting a value.");var t="string"==typeof e?this.parseTime(e,this.config.format):e;this.time=new c(t.hour,t.minute);var i=this.getFormattedTime();this.input.val(i.value).attr("data-time",i.time).attr("value",i.value)},setMinTime:function(e){this.minTime=e},setMaxTime:function(e){this.maxTime=e},setDisabled:function(t){if("hours"===t||"minutes"===t){var i=this,s=this.timepicker.clockHolder.clock;"hours"===t&&s.hours.find(".mdtp__digit").each(function(t,s){var n=e(s),r=parseInt(n.data("hour")),a=i.selected.getPeriod(),o=new c(r,0);a!==o.getPeriod()&&o.invert();var d=i.isDisabled(o.getHour(),0);n[d?"addClass":"removeClass"]("digit--disabled")}),"minutes"===t&&s.minutes.find(".mdtp__digit").each(function(t,s){var n=e(s),r=parseInt(n.data("minute")),a=i.selected.getHour(),o=i.isDisabled(a,r);n[o?"addClass":"removeClass"]("digit--disabled")})}},isDisabled:function(e,t){var i=this,s=null,n=null,r=null,a=null,o=new Date,c=new Date(o.getFullYear(),o.getMonth(),o.getDate(),e,t,0,0),d="hours"===i.activeView;return i.minTime&&(s="now"===i.minTime?i.getSystemTime():i.parseTime(i.minTime)),i.maxTime&&(r="now"===i.maxTime?i.getSystemTime():i.parseTime(i.maxTime)),s&&(n=new Date(o.getFullYear(),o.getMonth(),o.getDate(),s.getHour(),d?0:s.getMinutes(),0,0)),r&&(a=new Date(o.getFullYear(),o.getMonth(),o.getDate(),r.getHour(),d?0:r.getMinutes(),0,0)),n&&n>c||a&&c>a},resetSelected:function(){this.setHour(this.time.hour),this.setMinute(this.time.minute),this.setPeriod(this.time.getPeriod())},getFormattedTime:function(){var e=this.time.format(this.config.timeFormat,!1),t=this.time.format(this.config.format,this.config.hourPadding);return{time:e,value:t}},getSystemTime:function(){var e=new Date;return new c(e.getHours(),e.getMinutes())},parseTime:function(e,t){var i=this,s="undefined"==typeof t?i.config.format:t,n=(s.match(/h/g)||[]).length,r=n>1,a=((s.match(/m/g)||[]).length,(s.match(/t/g)||[]).length),o=e.length,d=s.indexOf("h"),u=s.lastIndexOf("h"),m="",l="",p="";if(i.config.hourPadding||r)m=e.substr(d,2);else{var h=s.substring(d-1,d),f=s.substring(u+1,u+2);m=u===s.length-1?e.substring(e.indexOf(h,d-1)+1,o):0===d?e.substring(0,e.indexOf(f,d)):e.substring(e.indexOf(h,d-1)+1,e.indexOf(f,d+1))}s=s.replace(/(hh|h)/g,m);var v=s.indexOf("m"),g=s.lastIndexOf("m"),k=s.indexOf("t"),w=s.substring(v-1,v);s.substring(g+1,g+2);l=g===s.length-1?e.substring(e.indexOf(w,v-1)+1,o):0===v?e.substring(0,2):e.substr(v,2),p=r?parseInt(m)>11?a>1?"PM":"pm":a>1?"AM":"am":e.substr(k,2);var b="pm"===p.toLowerCase(),H=new c(parseInt(m),parseInt(l));return(b&&parseInt(m)<12||!b&&12===parseInt(m))&&H.invert(),H},switchView:function(e){var t=this,i=this.timepicker,s=350;"hours"!==e&&"minutes"!==e||(t.activeView=e,t.setDisabled(e),i.timeHolder.hour["hours"===e?"addClass":"removeClass"]("active"),i.timeHolder.minute["hours"===e?"removeClass":"addClass"]("active"),i.clockHolder.clock.hours.addClass("animate"),"hours"===e&&i.clockHolder.clock.hours.removeClass("hidden"),clearTimeout(t.hTimeout),t.hTimeout=setTimeout(function(){"hours"!==e&&i.clockHolder.clock.hours.addClass("hidden"),i.clockHolder.clock.hours.removeClass("animate")},"hours"===e?20:s),i.clockHolder.clock.minutes.addClass("animate"),"minutes"===e&&i.clockHolder.clock.minutes.removeClass("hidden"),clearTimeout(t.mTimeout),t.mTimeout=setTimeout(function(){"minutes"!==e&&i.clockHolder.clock.minutes.addClass("hidden"),i.clockHolder.clock.minutes.removeClass("animate")},"minutes"===e?20:s))},show:function(){var t=this;if(""===t.input.val()){var i=t.getSystemTime();this.time=new c(i.hour,i.minute)}t.resetSelected(),e("body").attr("mdtimepicker-display","on"),t.timepicker.wrapper.addClass("animate"),t.timepicker.overlay.removeClass("hidden").addClass("animate"),setTimeout(function(){t.timepicker.overlay.removeClass("animate"),t.timepicker.wrapper.removeClass("animate"),t.visible=!0,t.input.blur()},10)},hide:function(){var t=this;t.timepicker.overlay.addClass("animate"),t.timepicker.wrapper.addClass("animate"),setTimeout(function(){t.switchView("hours"),t.timepicker.overlay.addClass("hidden").removeClass("animate"),t.timepicker.wrapper.removeClass("animate"),e("body").removeAttr("mdtimepicker-display"),t.visible=!1,t.input.focus()},300)},destroy:function(){var e=this;e.input.removeData(t).unbind("keydown").unbind("click").removeProp("readonly"),e.timepicker.overlay.remove()},triggerChange:function(t){this.input.trigger(e.Event("timechanged",t)).trigger("onchange").trigger("change")}},e.fn.mdtimepicker=function(){var i=arguments,s=i[0];return e(this).each(function(){var n=this,r=e(this),a=e(this).data(t),o=e.extend({},e.fn.mdtimepicker.defaults,r.data(),"object"==typeof s&&s);a||r.data(t,a=new d(n,o)),"string"==typeof s&&a[s].apply(a,Array.prototype.slice.call(i).slice(1)),e(document).on("keydown",function(e){27===e.keyCode&&a.visible&&a.hide()})})},e.fn.mdtimepicker.defaults={timeFormat:"hh:mm:ss.000",format:"h:mm tt",theme:"blue",hourPadding:!1,clearBtn:!1}}(jQuery); \ No newline at end of file + * -- DO NOT REMOVE -- + */ +!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof exports?module.exports=e(require("jquery")):e(jQuery)}(function(e){if(void 0===e)throw new Error("MDTimePicker: This plugin requires jQuery");var t=[9,112,113,114,115,116,117,118,119,120,121,122,123],i=function(t,i){this.hour=t,this.minute=i,this.format=function(t,i){var s=this,r=(t.match(/h/g)||[]).length>1;return e.trim(t.replace(/(hh|h|mm|ss|tt|t)/g,function(e){switch(e.toLowerCase()){case"h":var t=s.getHour(!0);return i&&t<10?"0"+t:t;case"hh":return s.hour<10?"0"+s.hour:s.hour;case"mm":return s.minute<10?"0"+s.minute:s.minute;case"ss":return"00";case"t":return r?"":s.getPeriod().toLowerCase();case"tt":return r?"":s.getPeriod()}}))},this.setHour=function(e){this.hour=e},this.getHour=function(e){return e?[0,12].indexOf(this.hour)>=0?12:this.hour%12:this.hour},this.invert=function(){"AM"===this.getPeriod()?this.setHour(this.getHour()+12):this.setHour(this.getHour()-12)},this.setMinutes=function(e){this.minute=e},this.getMinutes=function(){return this.minute},this.getPeriod=function(){return this.hour<12?"AM":"PM"}},s=function(s,r){var n=this;this.visible=!1,this.activeView="hours",this.hTimeout=null,this.mTimeout=null,this.input=e(s),this.config=r,this.time=new i(0,0),this.selected=new i(0,0),this.timepicker={overlay:e(''),wrapper:e('
'),timeHolder:{wrapper:e('
'),hour:e('12'),dots:e(':'),minute:e('00'),am_pm:e('AM')},clockHolder:{wrapper:e('
'),am:e('AM'),pm:e('PM'),clock:{wrapper:e('
'),dot:e(''),hours:e('
'),minutes:e('
')},buttonsHolder:{wrapper:e('
'),btnClear:e('Clear'),btnOk:e('Ok'),btnCancel:e('Cancel')}}},this.setMinTime(this.input.data("mintime")||this.config.minTime),this.setMaxTime(this.input.data("maxtime")||this.config.maxTime);var a=n.timepicker;if(n.setup().appendTo("body"),a.overlay.click(function(){n.hide()}),a.wrapper.click(function(e){e.stopPropagation()}).on("keydown",function(e){27===e.keyCode&&n.hide()}),a.clockHolder.am.click(function(){"AM"!==n.selected.getPeriod()&&n.setPeriod("am")}),a.clockHolder.pm.click(function(){"PM"!==n.selected.getPeriod()&&n.setPeriod("pm")}),a.timeHolder.hour.click(function(){"hours"!==n.activeView&&n.switchView("hours")}),a.timeHolder.minute.click(function(){"minutes"!==n.activeView&&n.switchView("minutes")}),a.clockHolder.buttonsHolder.btnOk.click(function(){var e=n.selected;if(!n.isDisabled(e.getHour(),e.getMinutes())){n.setValue(e);var t=n.getFormattedTime();n.triggerChange({time:t.time,value:t.value}),n.hide()}}),a.clockHolder.buttonsHolder.btnCancel.click(function(){n.hide()}),n.config.clearBtn&&a.clockHolder.buttonsHolder.btnClear.click(function(){n.input.val("").attr("data-time",null).attr("value",""),n.triggerChange({time:null,value:""}),n.hide()}),n.input.on("keydown",function(e){return 13===e.keyCode&&n.show(),!(t.indexOf(e.which)<0&&n.config.readOnly)}).on("click",function(){n.show()}).prop("readonly",!0),""!==n.input.val()){var o=n.parseTime(n.input.val(),n.config.format);n.setValue(o)}else{o=n.getSystemTime();n.time=new i(o.hour,o.minute)}n.resetSelected(),n.switchView(n.activeView)};s.prototype={constructor:s,setup:function(){var t=this,i=t.timepicker,s=i.overlay,r=i.wrapper,n=i.timeHolder,a=i.clockHolder;n.wrapper.append(n.hour).append(n.dots).append(n.minute).appendTo(r),t.config.is24hour||n.wrapper.append(n.am_pm);for(var o=t.config.is24hour?24:12,c=0;c'+(u?"00":d)+"
");t.config.is24hour&&d<13&&l.addClass("inner--digit"),l.find("span").click(function(){var i=parseInt(e(this).parent().data("hour")),s=t.selected.getPeriod(),r=t.config.is24hour?i:(i+("PM"===s&&i<12||"AM"===s&&12===i?12:0))%24;t.isDisabled(r,0)||(t.setHour(r),t.switchView("minutes"))}),a.clock.hours.append(l)}for(c=0;c<60;c++){var h=c<10?"0"+c:c,p=e('
');c%5==0?p.addClass("marker").html(""+h+""):p.html(""),p.find("span").click(function(){var i=parseInt(e(this).parent().data("minute")),s=t.selected.getHour();t.isDisabled(s,i)||t.setMinute(i)}),a.clock.minutes.append(p)}return t.config.is24hour||a.clock.wrapper.append(a.am).append(a.pm),a.clock.wrapper.append(a.clock.dot).append(a.clock.hours).append(a.clock.minutes).appendTo(a.wrapper),t.config.clearBtn&&a.buttonsHolder.wrapper.append(a.buttonsHolder.btnClear),a.buttonsHolder.wrapper.append(a.buttonsHolder.btnCancel).append(a.buttonsHolder.btnOk).appendTo(a.wrapper),a.wrapper.appendTo(r),r.attr("data-theme",t.input.data("theme")||t.config.theme||e.fn.mdtimepicker.defaults.theme),r.appendTo(s),s},setHour:function(t){if(void 0===t)throw new Error("Expecting a value.");var i=!this.config.is24hour;this.selected.setHour(t);var s=this.selected.getHour(i);this.timepicker.timeHolder.hour.text(i?s:this.selected.format("hh")),this.timepicker.clockHolder.clock.hours.children("div").each(function(t,i){var r=e(i),n=r.data("hour");r[n===s?"addClass":"removeClass"]("active")})},setMinute:function(t){if(void 0===t)throw new Error("Expecting a value.");this.selected.setMinutes(t),this.timepicker.timeHolder.minute.text(t<10?"0"+t:t),this.timepicker.clockHolder.clock.minutes.children("div").each(function(i,s){var r=e(s),n=r.data("minute");r[n===t?"addClass":"removeClass"]("active")})},setPeriod:function(e){if(void 0===e)throw new Error("Expecting a value.");this.selected.getPeriod()!==e.toUpperCase()&&this.selected.invert();var t=this.selected.getPeriod();this.setDisabled(this.activeView),this.timepicker.timeHolder.am_pm.text(t),this.timepicker.clockHolder.am["AM"===t?"addClass":"removeClass"]("active"),this.timepicker.clockHolder.pm["PM"===t?"addClass":"removeClass"]("active")},setValue:function(e){if(void 0===e)throw new Error("Expecting a value.");var t="string"==typeof e?this.parseTime(e,this.config.format):e;this.time=new i(t.hour,t.minute);var s=this.getFormattedTime();this.input.val(s.value).attr("data-time",s.time).attr("value",s.value)},setMinTime:function(e){this.minTime=e},setMaxTime:function(e){this.maxTime=e},setDisabled:function(t){if("hours"===t||"minutes"===t){var s=this,r=this.timepicker.clockHolder.clock;"hours"===t&&r.hours.find(".mdtp__digit").each(function(t,r){var n=e(r),a=parseInt(n.data("hour")),o=s.selected.getPeriod(),c=new i(a,0);s.config.is24hour||o===c.getPeriod()||c.invert(),n[s.isDisabled(c.getHour(),0)?"addClass":"removeClass"]("digit--disabled")}),"minutes"===t&&r.minutes.find(".mdtp__digit").each(function(t,i){var r=e(i),n=parseInt(r.data("minute")),a=s.selected.getHour();r[s.isDisabled(a,n)?"addClass":"removeClass"]("digit--disabled")})}},isDisabled:function(e,t){var i=this,s=null,r=null,n=null,a=null,o=new Date,c=new Date(o.getFullYear(),o.getMonth(),o.getDate(),e,t,0,0),d="hours"===i.activeView;return i.minTime&&(s="now"===i.minTime?i.getSystemTime():i.parseTime(i.minTime)),i.maxTime&&(n="now"===i.maxTime?i.getSystemTime():i.parseTime(i.maxTime)),s&&(r=new Date(o.getFullYear(),o.getMonth(),o.getDate(),s.getHour(),d?0:s.getMinutes(),0,0)),n&&(a=new Date(o.getFullYear(),o.getMonth(),o.getDate(),n.getHour(),d?0:n.getMinutes(),0,0)),r&&ca},resetSelected:function(){this.setHour(this.time.hour),this.setMinute(this.time.minute),this.setPeriod(this.time.getPeriod())},getFormattedTime:function(){return{time:this.time.format(this.config.timeFormat,!1),value:this.time.format(this.config.format,this.config.hourPadding)}},getSystemTime:function(){var e=new Date;return new i(e.getHours(),e.getMinutes())},parseTime:function(e,t){var s=void 0===t?this.config.format:t,r=(s.match(/h/g)||[]).length>1,n=((s.match(/m/g)||[]).length,(s.match(/t/g)||[]).length),a=e.length,o=s.indexOf("h"),c=s.lastIndexOf("h"),d="",m="";if(this.config.hourPadding||r)d=e.substr(o,2);else{var u=s.substring(o-1,o),l=s.substring(c+1,c+2);d=c===s.length-1?e.substring(e.indexOf(u,o-1)+1,a):0===o?e.substring(0,e.indexOf(l,o)):e.substring(e.indexOf(u,o-1)+1,e.indexOf(l,o+1))}var h=(s=s.replace(/(hh|h)/g,d)).indexOf("m"),p=s.lastIndexOf("m"),f=s.indexOf("t"),g=s.substring(h-1,h);s.substring(p+1,p+2);m=p===s.length-1?e.substring(e.indexOf(g,h-1)+1,a):0===h?e.substring(0,2):e.substr(h,2);var v="pm"===(r?parseInt(d)>11?n>1?"PM":"pm":n>1?"AM":"am":e.substr(f,2)).toLowerCase(),k=new i(parseInt(d),parseInt(m));return(v&&parseInt(d)<12||!v&&12===parseInt(d))&&k.invert(),k},switchView:function(e){var t=this,i=this.timepicker;"hours"!==e&&"minutes"!==e||(t.activeView=e,t.setDisabled(e),i.timeHolder.hour["hours"===e?"addClass":"removeClass"]("active"),i.timeHolder.minute["hours"===e?"removeClass":"addClass"]("active"),i.clockHolder.clock.hours.addClass("animate"),"hours"===e&&i.clockHolder.clock.hours.removeClass("hidden"),clearTimeout(t.hTimeout),t.hTimeout=setTimeout(function(){"hours"!==e&&i.clockHolder.clock.hours.addClass("hidden"),i.clockHolder.clock.hours.removeClass("animate")},"hours"===e?20:350),i.clockHolder.clock.minutes.addClass("animate"),"minutes"===e&&i.clockHolder.clock.minutes.removeClass("hidden"),clearTimeout(t.mTimeout),t.mTimeout=setTimeout(function(){"minutes"!==e&&i.clockHolder.clock.minutes.addClass("hidden"),i.clockHolder.clock.minutes.removeClass("animate")},"minutes"===e?20:350))},show:function(){var t=this;if(""===t.input.val()){var s=t.getSystemTime();this.time=new i(s.hour,s.minute)}t.resetSelected(),e("body").attr("mdtimepicker-display","on"),t.timepicker.wrapper.addClass("animate"),t.timepicker.overlay.removeClass("hidden").addClass("animate"),setTimeout(function(){t.timepicker.overlay.removeClass("animate"),t.timepicker.wrapper.removeClass("animate").focus(),t.visible=!0,t.input.blur()},10)},hide:function(){var t=this;t.timepicker.overlay.addClass("animate"),t.timepicker.wrapper.addClass("animate"),setTimeout(function(){t.switchView("hours"),t.timepicker.overlay.addClass("hidden").removeClass("animate"),t.timepicker.wrapper.removeClass("animate"),e("body").removeAttr("mdtimepicker-display"),t.visible=!1,t.input.focus()},300)},destroy:function(){this.input.removeData("mdtimepicker").unbind("keydown").unbind("click").removeProp("readonly"),this.timepicker.overlay.remove()},triggerChange:function(t){this.input.trigger(e.Event("timechanged",t)).trigger("onchange").trigger("change")}},e.fn.mdtimepicker=function(){var t=arguments,i=t[0],r=e.extend({},e.fn.mdtimepicker.defaults);return"object"==typeof i&&i.is24hour&&(r.format="hh:mm"),e(this).each(function(n,a){var o=e(this),c=e(this).data("mdtimepicker"),d=e.extend({},r,o.data(),"object"==typeof i&&i);c||o.data("mdtimepicker",c=new s(this,d)),"string"==typeof i&&c[i].apply(c,Array.prototype.slice.call(t).slice(1))})},e.fn.mdtimepicker.defaults={timeFormat:"hh:mm:ss.000",format:"h:mm tt",theme:"blue",hourPadding:!1,clearBtn:!1,is24hour:!1}}); \ No newline at end of file