diff --git a/dist/js/mdDateTimePicker.js b/dist/js/mdDateTimePicker.js
index 56fd30a..6bcd6d7 100644
--- a/dist/js/mdDateTimePicker.js
+++ b/dist/js/mdDateTimePicker.js
@@ -50,15 +50,16 @@
   *
   * @method constructor
   *
-  * @param  {string}   type = 'date' or 'time 									[type of dialog]
+  * @param  {String}   type = 'date' or 'time 									[type of dialog]
   * @param  {moment}   init 																		[initial value for the dialog date or time, defaults to today] [@default = today]
   * @param  {moment}   past 																		[the past moment till which the calendar shall render] [@default = exactly 21 Years ago from init]
   * @param  {moment}   future           												[the future moment till which the calendar shall render] [@default = init]
   * @param	{Boolean}  mode 																		[this value tells whether the time dialog will have the 24 hour mode (true) or 12 hour mode (false)] [@default = false]
-  * @param  {string}   orientation = 'LANDSCAPE' or 'PORTRAIT'  [force the orientation of the picker @default = 'LANDSCAPE']
+  * @param  {String}   orientation = 'LANDSCAPE' or 'PORTRAIT'  [force the orientation of the picker @default = 'LANDSCAPE']
   * @param  {element}  trigger																	[element on which all the events will be dispatched e.g var foo = document.getElementById('bar'), here element = foo]
-  * @param  {string}  ok = 'ok'																	[ok button's text]
-  * @param  {string}  cancel = 'cancel'													[cancel button's text]
+  * @param  {String}  ok = 'ok'																	[ok button's text]
+  * @param  {String}  cancel = 'cancel'													[cancel button's text]
+  * @param  {Boolean} colon = 'cancel'													[add an option to enable quote in 24 hour mode]
   *
   * @return {Object}    																				[mdDateTimePicker]
   */
@@ -80,7 +81,9 @@
 			    _ref$ok = _ref.ok,
 			    ok = _ref$ok === undefined ? 'ok' : _ref$ok,
 			    _ref$cancel = _ref.cancel,
-			    cancel = _ref$cancel === undefined ? 'cancel' : _ref$cancel;
+			    cancel = _ref$cancel === undefined ? 'cancel' : _ref$cancel,
+			    _ref$colon = _ref.colon,
+			    colon = _ref$colon === undefined ? !1 : _ref$colon;
 
 			_classCallCheck(this, mdDateTimePicker);
 
@@ -93,6 +96,7 @@
 			this._trigger = trigger;
 			this._ok = ok;
 			this._cancel = cancel;
+			this._colon = colon;
 
 			/**
    * [dialog selected classes have the same structure as dialog but one level down]
@@ -429,6 +433,10 @@
 						text = '00';
 					}
 					this._fillText(hour, text);
+					// add the configurable colon in this mode issue #56
+					if (this._colon) {
+						dotSpan.removeAttribute('style');
+					}
 				} else {
 					this._fillText(hour, m.format('h'));
 					this._sDialog[m.format('A')].classList.add('mddtp-picker__color--active');
diff --git a/dist/js/mdDateTimePicker.min.js b/dist/js/mdDateTimePicker.min.js
index 61cdbcf..a511673 100644
--- a/dist/js/mdDateTimePicker.min.js
+++ b/dist/js/mdDateTimePicker.min.js
@@ -1 +1 @@
-!function(t,e){if("function"==typeof define&&define.amd)define(["exports"],e);else if("undefined"!=typeof exports)e(exports);else{var i={exports:{}};e(i.exports),t.mdDateTimePicker=i.exports}}(this,function(t){"use strict";function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function t(t,e){for(var i=0;i<e.length;i++){var a=e[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}return function(e,i,a){return i&&t(e.prototype,i),a&&t(e,a),e}}(),a={view:!0,state:!1},s=function(){function t(i){var a=i.type,s=i.init,d=void 0===s?moment():s,l=i.past,n=void 0===l?moment().subtract(21,"years"):l,o=i.future,c=void 0===o?d:o,r=i.mode,_=void 0===r?!1:r,m=i.orientation,h=void 0===m?"LANDSCAPE":m,p=i.trigger,u=void 0===p?"":p,g=i.ok,v=void 0===g?"ok":g,D=i.cancel,f=void 0===D?"cancel":D;e(this,t),this._type=a,this._init=d,this._past=n,this._future=c,this._mode=_,this._orientation=h,this._trigger=u,this._ok=v,this._cancel=f,this._sDialog={},document.getElementById("mddtp-picker__"+this._type)||this._buildDialog()}return i(t,[{key:"toggle",value:function(){this._selectDialog(),t.dialog.state?this._hideDialog():("date"===this._type?this._initDateDialog(this._init):"time"===this._type&&this._initTimeDialog(this._init),this._showDialog())}},{key:"_selectDialog",value:function(){this._sDialog.picker=document.getElementById("mddtp-picker__"+[this._type]);for(var t=["viewHolder","years","header","cancel","ok","left","right","previous","current","next","subtitle","title","titleDay","titleMonth","AM","PM","needle","hourView","minuteView","hour","minute","fakeNeedle","circularHolder","circle","dotSpan"],e=t.length;e--;)this._sDialog[t[e]]=document.getElementById("mddtp-"+this._type+"__"+t[e]);this._sDialog.tDate=this._init.clone(),this._sDialog.sDate=this._init.clone()}},{key:"_showDialog",value:function(){var e=this,i="zoomIn";t.dialog.state=!0,this._sDialog.picker.classList.remove("mddtp-picker--inactive"),this._sDialog.picker.classList.add(i),"PORTRAIT"===this._orientation&&this._sDialog.picker.classList.add("mddtp-picker--portrait"),setTimeout(function(){e._sDialog.picker.classList.remove(i)},300)}},{key:"_hideDialog",value:function(){var e=this,i=this._sDialog.years,a=e._sDialog.title,s=e._sDialog.subtitle,d=this._sDialog.viewHolder,l=this._sDialog.AM,n=this._sDialog.PM,o=this._sDialog.minute,c=this._sDialog.hour,r=this._sDialog.minuteView,_=this._sDialog.hourView,m=this._sDialog.picker,h=this._sDialog.needle,p=this._sDialog.dotSpan,u="mddtp-picker__color--active",g="mddtp-picker--inactive",v="mddtp-picker__years--invisible",D="zoomIn",f="zoomOut",k="mddtp-picker__circularView--hidden",C="mddtp-picker__selection";t.dialog.state=!1,t.dialog.view=!0,this._sDialog.picker.classList.add(f),"date"===this._type?(i.classList.remove(D,f),i.classList.add(v),a.classList.remove(u),s.classList.add(u),d.classList.remove(f)):(l.classList.remove(u),n.classList.remove(u),o.classList.remove(u),c.classList.add(u),r.classList.add(k),_.classList.remove(k),s.setAttribute("style","display: none"),p.setAttribute("style","display: none"),h.className=C),setTimeout(function(){e._sDialog.picker.classList.remove("mddtp-picker--portrait"),e._sDialog.picker.classList.remove(f),e._sDialog.picker.classList.add(g);var t=m.cloneNode(!0);m.parentNode.replaceChild(t,m)},300)}},{key:"_buildDialog",value:function(){var t=this._type,e=document.createDocumentFragment(),i=document.createElement("div"),a=document.createElement("div"),s=document.createElement("div"),d=document.createElement("div"),l=document.createElement("button"),n=document.createElement("button");if(i.id="mddtp-picker__"+t,i.classList.add("mddtp-picker"),i.classList.add("mddtp-picker-"+t),i.classList.add("mddtp-picker--inactive"),i.classList.add("animated"),this._addId(a,"header"),this._addClass(a,"header"),i.appendChild(a),this._addClass(s,"body"),s.appendChild(d),i.appendChild(s),"date"===this._type){var o=document.createElement("div"),c=document.createElement("div"),r=document.createElement("div"),_=document.createElement("div"),m=document.createElement("div"),h=document.createElement("ul"),p=document.createElement("li"),u=document.createElement("li"),g=document.createElement("li"),v=document.createElement("button"),D=document.createElement("button"),f=document.createElement("ul");this._addId(o,"subtitle"),this._addClass(o,"subtitle"),this._addId(c,"title"),this._addClass(c,"title",["mddtp-picker__color--active"]),this._addId(r,"titleDay"),this._addId(_,"titleMonth"),c.appendChild(r),c.appendChild(_),a.appendChild(o),a.appendChild(c),this._addId(m,"viewHolder"),this._addClass(m,"viewHolder",["animated"]),this._addClass(h,"views"),this._addId(p,"previous"),p.classList.add("mddtp-picker__view"),this._addId(u,"current"),u.classList.add("mddtp-picker__view"),this._addId(g,"next"),g.classList.add("mddtp-picker__view"),this._addView(p),this._addView(u),this._addView(g),m.appendChild(h),h.appendChild(p),h.appendChild(u),h.appendChild(g),this._addId(v,"left"),v.classList.add("mddtp-button"),this._addClass(v,"left"),v.setAttribute("type","button"),this._addId(D,"right"),D.classList.add("mddtp-button"),this._addClass(D,"right"),D.setAttribute("type","button"),this._addId(f,"years"),this._addClass(f,"years",["mddtp-picker__years--invisible","animated"]),s.appendChild(m),s.appendChild(v),s.appendChild(D),s.appendChild(f)}else{var k=document.createElement("div"),C=document.createElement("span"),L=document.createElement("span"),y=document.createElement("span"),b=document.createElement("div"),w=document.createElement("div"),E=document.createElement("div"),I=document.createElement("div"),M=document.createElement("div"),x=document.createElement("span"),T=document.createElement("span"),A=document.createElement("span"),V=document.createElement("div"),N=document.createElement("div"),B=document.createElement("div");this._addId(k,"title"),this._addClass(k,"title"),this._addId(C,"hour"),C.classList.add("mddtp-picker__color--active"),L.textContent=":",this._addId(L,"dotSpan"),L.setAttribute("style","display: none"),this._addId(y,"minute"),this._addId(b,"subtitle"),this._addClass(b,"subtitle"),b.setAttribute("style","display: none"),this._addId(w,"AM"),w.textContent="AM",this._addId(E,"PM"),E.textContent="PM",k.appendChild(C),k.appendChild(L),k.appendChild(y),b.appendChild(w),b.appendChild(E),a.appendChild(k),a.appendChild(b),this._addId(I,"circularHolder"),this._addClass(I,"circularHolder"),this._addId(M,"needle"),M.classList.add("mddtp-picker__selection"),this._addClass(x,"dot"),this._addClass(T,"line"),this._addId(A,"circle"),this._addClass(A,"circle"),this._addId(V,"minuteView"),V.classList.add("mddtp-picker__circularView"),V.classList.add("mddtp-picker__circularView--hidden"),this._addId(N,"fakeNeedle"),N.classList.add("mddtp-picker__circle--fake"),this._addId(B,"hourView"),B.classList.add("mddtp-picker__circularView"),M.appendChild(x),M.appendChild(T),M.appendChild(A),I.appendChild(M),I.appendChild(V),I.appendChild(N),I.appendChild(B),s.appendChild(I)}d.classList.add("mddtp-picker__action"),this._addId(l,"cancel"),l.classList.add("mddtp-button"),l.setAttribute("type","button"),this._addId(n,"ok"),n.classList.add("mddtp-button"),n.setAttribute("type","button"),d.appendChild(l),d.appendChild(n),s.appendChild(d),e.appendChild(i),document.getElementsByTagName("body").item(0).appendChild(e)}},{key:"_initTimeDialog",value:function(t){var e=this._sDialog.hour,i=this._sDialog.minute,a=this._sDialog.subtitle,s=this._sDialog.dotSpan;if(this._mode){var d=parseInt(t.format("H"),10);0===d&&(d="00"),this._fillText(e,d)}else this._fillText(e,t.format("h")),this._sDialog[t.format("A")].classList.add("mddtp-picker__color--active"),a.removeAttribute("style"),s.removeAttribute("style");this._fillText(i,t.format("mm")),this._initHour(),this._initMinute(),this._attachEventHandlers(),this._changeM(),this._dragDial(),this._switchToView(e),this._switchToView(i),this._addClockEvent(),this._setButtonText()}},{key:"_initHour",value:function(){var t=this._sDialog.hourView,e=this._sDialog.needle,i="mddtp-hour__selected",a="mddtp-picker__cell--selected",s="mddtp-picker__cell--rotate-",d="mddtp-picker__cell",l=document.createDocumentFragment(),n=void 0;if(this._mode){n=parseInt(this._sDialog.tDate.format("H"),10);for(var o=1,c=5;24>=o;o++,c+=5){var r=document.createElement("div"),_=document.createElement("span");r.classList.add(d),24===o?_.textContent="00":_.textContent=o,r.classList.add(s+c),n===o&&(r.id=i,r.classList.add(a),e.classList.add(s+c)),24===o&&0===n&&(r.id=i,r.classList.add(a),e.classList.add(s+c)),r.appendChild(_),l.appendChild(r)}}else{n=parseInt(this._sDialog.tDate.format("h"),10);for(var m=1,h=10;12>=m;m++,h+=10){var p=document.createElement("div"),u=document.createElement("span");p.classList.add(d),u.textContent=m,p.classList.add(s+h),n===m&&(p.id=i,p.classList.add(a),e.classList.add(s+h)),p.appendChild(u),l.appendChild(p)}}for(;t.lastChild;)t.removeChild(t.lastChild);t.appendChild(l)}},{key:"_initMinute",value:function(){for(var t=this._sDialog.minuteView,e=parseInt(this._sDialog.tDate.format("m"),10),i="mddtp-minute__selected",a="mddtp-picker__cell--selected",s="mddtp-picker__cell--rotate-",d="mddtp-picker__cell",l=document.createDocumentFragment(),n=5,o=10;60>=n;n+=5,o+=10){var c=document.createElement("div"),r=document.createElement("span");c.classList.add(d),60===n?r.textContent=this._numWithZero(0):r.textContent=this._numWithZero(n),0===e&&(e=60),c.classList.add(s+o),(e===n||e-1===n||e+1===n||1===e&&60===n)&&(c.id=i,c.classList.add(a)),c.appendChild(r),l.appendChild(c)}for(;t.lastChild;)t.removeChild(t.lastChild);t.appendChild(l)}},{key:"_initDateDialog",value:function(t){var e=this._sDialog.subtitle,i=this._sDialog.title,a=this._sDialog.titleDay,s=this._sDialog.titleMonth;this._fillText(e,t.format("YYYY")),this._fillText(a,t.format("ddd, ")),this._fillText(s,t.format("MMM D")),this._initYear(),this._initViewHolder(),this._attachEventHandlers(),this._changeMonth(),this._switchToView(e),this._switchToView(i),this._setButtonText()}},{key:"_initViewHolder",value:function(){var t=this._sDialog.tDate,e=(this._sDialog.picker,this._sDialog.current),i=this._sDialog.previous,a=this._sDialog.next,s=this._past,d=this._future;t.isBefore(s,"month")&&(t=s.clone()),t.isAfter(d,"month")&&(t=d.clone()),this._sDialog.tDate=t,this._initMonth(e,t),this._initMonth(a,moment(this._getMonth(t,1))),this._initMonth(i,moment(this._getMonth(t,-1))),this._toMoveMonth()}},{key:"_initMonth",value:function(t,e){var i=e.format("MMMM YYYY"),a=t.getElementsByTagName("div");this._fillText(a[0],i);var s=document.createDocumentFragment(),d=a[3],l=parseInt(moment(e).date(1).day(),10),n=-1,o=-1,c=parseInt(moment(e).endOf("month").format("D"),10)+l-1,r=l,_="mddtp-picker__cell",m=c;moment().isSame(e,"month")&&(n=parseInt(moment().format("D"),10),n+=l-1),this._past.isSame(e,"month")&&(r=parseInt(this._past.format("D"),10),r+=l-1),this._future.isSame(e,"month")&&(m=parseInt(this._future.format("D"),10),m+=l-1),this._sDialog.sDate.isSame(e,"month")&&(o=parseInt(moment(e).format("D"),10),o+=l-1);for(var h=0;42>h;h++){var p=document.createElement("span"),u=h-l+1;h>=l&&c>=h&&(h>m||r>h?p.classList.add(_+"--disabled"):p.classList.add(_),this._fillText(p,u)),n===h&&p.classList.add(_+"--today"),o===h&&(p.classList.add(_+"--selected"),p.id="mddtp-date__selected"),s.appendChild(p)}for(;d.lastChild;)d.removeChild(d.lastChild);d.appendChild(s),this._addCellClickEvent(d)}},{key:"_initYear",value:function(){for(var t=this._sDialog.years,e=this._sDialog.tDate.year(),i=document.createDocumentFragment(),a=this._past.year(),s=this._future.year(),d=a;s>=d;d++){var l=document.createElement("li");l.textContent=d,d===e&&(l.id="mddtp-date__currentYear",l.classList.add("mddtp-picker__li--current")),i.appendChild(l)}for(;t.lastChild;)t.removeChild(t.lastChild);t.appendChild(i),this._changeYear(t)}},{key:"_switchToView",value:function(t){var e=this;"date"==this._type?t.onclick=function(){e._switchToDateView(t,e)}:t.onclick=function(){e._switchToTimeView(e)}}},{key:"_switchToTimeView",value:function(e){var i=e._sDialog.hourView,a=e._sDialog.minuteView,s=e._sDialog.hour,d=e._sDialog.minute,l="mddtp-picker__color--active",n="mddtp-picker__circularView--hidden",o="mddtp-picker__selection",c=e._sDialog.needle,r=e._sDialog.circularHolder,_=e._sDialog.circle,m=e._sDialog.fakeNeedle,h=60,p=void 0;i.classList.toggle(n),a.classList.toggle(n),s.classList.toggle(l),d.classList.toggle(l),c.className="",c.classList.add(o),t.dialog.view?(p=e._sDialog.sDate.format("m"),setTimeout(function(){var t=r.getBoundingClientRect(),e=_.getBoundingClientRect();m.setAttribute("style","left:"+(e.left-t.left)+"px;top:"+(e.top-t.top)+"px")},300)):e._mode?(h=24,p=parseInt(e._sDialog.sDate.format("H"),10),0===p&&(p=24)):(h=12,p=e._sDialog.sDate.format("h"));var u=e._calcRotation(h,parseInt(p,10));u&&c.classList.add(u),t.dialog.view=!t.dialog.view}},{key:"_switchToDateView",value:function(e,i){e.setAttribute("disabled","");var a=i._sDialog.viewHolder,s=i._sDialog.years,d=i._sDialog.title,l=i._sDialog.subtitle,n=document.getElementById("mddtp-date__currentYear");t.dialog.view?(a.classList.add("zoomOut"),s.classList.remove("mddtp-picker__years--invisible"),s.classList.add("zoomIn"),n.scrollIntoViewIfNeeded()):(s.classList.add("zoomOut"),a.classList.remove("zoomOut"),a.classList.add("zoomIn"),setTimeout(function(){s.classList.remove("zoomIn","zoomOut"),s.classList.add("mddtp-picker__years--invisible"),a.classList.remove("zoomIn")},300)),d.classList.toggle("mddtp-picker__color--active"),l.classList.toggle("mddtp-picker__color--active"),t.dialog.view=!t.dialog.view,setTimeout(function(){e.removeAttribute("disabled")},300)}},{key:"_addClockEvent",value:function(){var t=this,e=this._sDialog.hourView,i=this._sDialog.minuteView,a="mddtp-picker__cell--selected";e.onclick=function(e){var i="mddtp-hour__selected",s=document.getElementById(i),d=0;e.target&&"SPAN"==e.target.nodeName&&(s.id="",s.classList.remove(a),e.target.parentNode.classList.add(a),e.target.parentNode.id=i,d=t._mode?parseInt(e.target.textContent,10):"AM"===t._sDialog.sDate.format("A")?e.target.textContent:parseInt(e.target.textContent,10)+12,t._sDialog.sDate.hour(d),t._sDialog.hour.textContent=e.target.textContent,t._switchToTimeView(t))},i.onclick=function(e){var i="mddtp-minute__selected",s=document.getElementById(i),d=0;e.target&&"SPAN"==e.target.nodeName&&(s&&(s.id="",s.classList.remove(a)),e.target.parentNode.classList.add(a),e.target.parentNode.id=i,d=e.target.textContent,t._sDialog.sDate.minute(d),t._sDialog.minute.textContent=d,t._switchToTimeView(t))}}},{key:"_addCellClickEvent",value:function(t){var e=this;t.onclick=function(t){if(t.target&&"SPAN"==t.target.nodeName&&t.target.classList.contains("mddtp-picker__cell")){var i=(e._sDialog.picker,t.target.textContent),a=e._sDialog.tDate.date(i),s="mddtp-date__selected",d="mddtp-picker__cell--selected",l=document.getElementById(s),n=e._sDialog.subtitle,o=e._sDialog.titleDay,c=e._sDialog.titleMonth;l&&(l.classList.remove(d),l.id=""),t.target.classList.add(d),t.target.id=s,e._sDialog.sDate=a.clone(),e._fillText(n,a.year()),e._fillText(o,a.format("ddd, ")),e._fillText(c,a.format("MMM D"))}}}},{key:"_toMoveMonth",value:function(){var t=this._sDialog.tDate,e=this._sDialog.left,i=this._sDialog.right,a=this._past,s=this._future;e.removeAttribute("disabled"),i.removeAttribute("disabled"),e.classList.remove("mddtp-button--disabled"),i.classList.remove("mddtp-button--disabled"),t.isSame(a,"month")&&(e.setAttribute("disabled",""),e.classList.add("mddtp-button--disabled")),t.isSame(s,"month")&&(i.setAttribute("disabled",""),i.classList.add("mddtp-button--disabled"))}},{key:"_changeMonth",value:function(){function t(t,s){var d=!1,n=e._sDialog.next,o=e._sDialog.current,c=e._sDialog.previous;i.setAttribute("disabled",""),a.setAttribute("disabled",""),o.classList.add(t),c.classList.add(t),n.classList.add(t);var r=s.cloneNode(!0),_=void 0;s===n?(_=c,o.parentNode.appendChild(r),n.id=o.id,o.id=c.id,c=o,o=n,n=r):(d=!0,_=n,c.id=o.id,o.id=n.id,n=o,o=c),setTimeout(function(){s===c&&(o.parentNode.insertBefore(r,o),c=r),e._sDialog.next=n,e._sDialog.current=o,e._sDialog.previous=c,o.classList.add(l),n.classList.add(l),c.classList.add(l),o.classList.remove(t),n.classList.remove(t),c.classList.remove(t),_.parentNode.removeChild(_)},300),setTimeout(function(){o.classList.remove(l),n.classList.remove(l),c.classList.remove(l),d?e._sDialog.tDate=e._getMonth(e._sDialog.tDate,-1):e._sDialog.tDate=e._getMonth(e._sDialog.tDate,1),e._initViewHolder()},350),setTimeout(function(){i.classList.contains("mddtp-button--disabled")||i.removeAttribute("disabled"),a.classList.contains("mddtp-button--disabled")||a.removeAttribute("disabled")},400)}var e=this,i=this._sDialog.left,a=this._sDialog.right,s="mddtp-picker__view--left",d="mddtp-picker__view--right",l="mddtp-picker__view--pause";i.onclick=function(){t(d,e._sDialog.previous)},a.onclick=function(){t(s,e._sDialog.next)}}},{key:"_changeYear",value:function(t){var e=this;t.onclick=function(i){if(i.target&&"LI"==i.target.nodeName){var a=document.getElementById("mddtp-date__currentYear");a.id="",a.classList.remove("mddtp-picker__li--current"),i.target.id="mddtp-date__currentYear",i.target.classList.add("mddtp-picker__li--current"),e._switchToDateView(t,e),e._sDialog.tDate.year(parseInt(i.target.textContent,10)),e._initViewHolder()}}}},{key:"_changeM",value:function(){var t=this,e=this._sDialog.AM,i=this._sDialog.PM;e.onclick=function(a){var s=t._sDialog.sDate.format("A");"PM"===s&&(t._sDialog.sDate.subtract(12,"h"),e.classList.toggle("mddtp-picker__color--active"),i.classList.toggle("mddtp-picker__color--active"))},i.onclick=function(a){var s=t._sDialog.sDate.format("A");"AM"===s&&(t._sDialog.sDate.add(12,"h"),e.classList.toggle("mddtp-picker__color--active"),i.classList.toggle("mddtp-picker__color--active"))}}},{key:"_dragDial",value:function(){var t=this,e=this._sDialog.needle,i=this._sDialog.circle,a=this._sDialog.fakeNeedle,s=this._sDialog.circularHolder,d=this._sDialog.minute,l="mddtp-picker__selection--quick",n="mddtp-picker__selection",o="mddtp-picker__cell--selected",c="mddtp-picker__cell--rotate-",r=s.getBoundingClientRect(),_=void 0,m=new Draggabilly(a,{containment:!0});m.on("pointerDown",function(){r=s.getBoundingClientRect()}),m.on("dragMove",function(t){var i=t.clientX-r.left-r.width/2,a=t.clientY-r.top-r.height/2,s=Math.atan2(-a,i);e.className="",0>s&&(s+=2*Math.PI),s*=180/Math.PI,s=360-s,s>270&&(s-=360),_=parseInt(s/6);var d=Math.abs(6*_-s),o=Math.abs(6*(_+1)-s);d>o&&_++,_+=15,e.classList.add(n),e.classList.add(l),e.classList.add(c+2*_)}),m.on("dragEnd",function(){var s=t._sDialog.minuteView.getElementsByTagName("div"),n="mddtp-minute__selected",c=document.getElementById(n),m=i.getBoundingClientRect();a.setAttribute("style","left:"+(m.left-r.left)+"px;top:"+(m.top-r.top)+"px"),e.classList.remove(l);var h=_;1===h&&(h=60),h=t._nearestDivisor(h,5),60===_&&(_=0),c&&(c.id="",c.classList.remove(o)),h>0&&(h/=5,h--,s[h].id=n,s[h].classList.add(o)),d.textContent=t._numWithZero(_),t._sDialog.sDate.minutes(_)})}},{key:"_attachEventHandlers",value:function(){var t=this,e=this._sDialog.ok,i=this._sDialog.cancel,a=new CustomEvent("onCancel"),s=new CustomEvent("onOk");i.onclick=function(){t.toggle(),t._trigger&&t._trigger.dispatchEvent(a)},e.onclick=function(){t._init=t._sDialog.sDate,t.toggle(),t._trigger&&t._trigger.dispatchEvent(s)}}},{key:"_setButtonText",value:function(){this._sDialog.cancel.textContent=this._cancel,this._sDialog.ok.textContent=this._ok}},{key:"_getMonth",value:function(t,e){var i=void 0;return i=t.clone(),e>0?i.add(Math.abs(e),"M"):i.subtract(Math.abs(e),"M")}},{key:"_nearestDivisor",value:function(t,e){return t%e===0?t:(t-1)%e===0?t-1:(t+1)%e===0?t+1:-1}},{key:"_numWithZero",value:function(t){return t>9?""+t:"0"+t}},{key:"_fillText",value:function(t,e){t.firstChild?t.firstChild.nodeValue=e:t.appendChild(document.createTextNode(e))}},{key:"_addId",value:function(t,e){t.id="mddtp-"+this._type+"__"+e}},{key:"_addClass",value:function(t,e,i){t.classList.add("mddtp-picker__"+e);var a=0;for(i&&(a=i.length,i.reverse());a--;)t.classList.add(i[a])}},{key:"_addView",value:function(t){for(var e=document.createElement("div"),i=document.createElement("div"),a=document.createElement("div"),s=document.createElement("div"),d=["S","F","T","W","T","M","S"],l=7;l--;){var n=document.createElement("span");n.textContent=d[l],a.appendChild(n)}this._addClass(e,"month"),this._addClass(i,"grid"),this._addClass(a,"th"),this._addClass(s,"tr"),t.appendChild(e),t.appendChild(i),i.appendChild(a),i.appendChild(s)}},{key:"_calcRotation",value:function(t,e){return e*=12===t?10:24===t?5:2,60===t&&0===e&&(e=120),"mddtp-picker__cell--rotate-"+e}},{key:"time",get:function(){return this._init},set:function(t){t&&(this._init=t)}},{key:"trigger",get:function(){return this._trigger},set:function(t){t&&(this._trigger=t)}}],[{key:"dialog",get:function(){return a},set:function(e){t.dialog=e}}]),t}();t["default"]=s});
\ No newline at end of file
+!function(t,e){if("function"==typeof define&&define.amd)define(["exports"],e);else if("undefined"!=typeof exports)e(exports);else{var i={exports:{}};e(i.exports),t.mdDateTimePicker=i.exports}}(this,function(t){"use strict";function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function t(t,e){for(var i=0;i<e.length;i++){var a=e[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}return function(e,i,a){return i&&t(e.prototype,i),a&&t(e,a),e}}(),a={view:!0,state:!1},s=function(){function t(i){var a=i.type,s=i.init,d=void 0===s?moment():s,l=i.past,n=void 0===l?moment().subtract(21,"years"):l,o=i.future,c=void 0===o?d:o,r=i.mode,_=void 0===r?!1:r,m=i.orientation,h=void 0===m?"LANDSCAPE":m,p=i.trigger,u=void 0===p?"":p,g=i.ok,v=void 0===g?"ok":g,D=i.cancel,f=void 0===D?"cancel":D,k=i.colon,C=void 0===k?!1:k;e(this,t),this._type=a,this._init=d,this._past=n,this._future=c,this._mode=_,this._orientation=h,this._trigger=u,this._ok=v,this._cancel=f,this._colon=C,this._sDialog={},document.getElementById("mddtp-picker__"+this._type)||this._buildDialog()}return i(t,[{key:"toggle",value:function(){this._selectDialog(),t.dialog.state?this._hideDialog():("date"===this._type?this._initDateDialog(this._init):"time"===this._type&&this._initTimeDialog(this._init),this._showDialog())}},{key:"_selectDialog",value:function(){this._sDialog.picker=document.getElementById("mddtp-picker__"+[this._type]);for(var t=["viewHolder","years","header","cancel","ok","left","right","previous","current","next","subtitle","title","titleDay","titleMonth","AM","PM","needle","hourView","minuteView","hour","minute","fakeNeedle","circularHolder","circle","dotSpan"],e=t.length;e--;)this._sDialog[t[e]]=document.getElementById("mddtp-"+this._type+"__"+t[e]);this._sDialog.tDate=this._init.clone(),this._sDialog.sDate=this._init.clone()}},{key:"_showDialog",value:function(){var e=this,i="zoomIn";t.dialog.state=!0,this._sDialog.picker.classList.remove("mddtp-picker--inactive"),this._sDialog.picker.classList.add(i),"PORTRAIT"===this._orientation&&this._sDialog.picker.classList.add("mddtp-picker--portrait"),setTimeout(function(){e._sDialog.picker.classList.remove(i)},300)}},{key:"_hideDialog",value:function(){var e=this,i=this._sDialog.years,a=e._sDialog.title,s=e._sDialog.subtitle,d=this._sDialog.viewHolder,l=this._sDialog.AM,n=this._sDialog.PM,o=this._sDialog.minute,c=this._sDialog.hour,r=this._sDialog.minuteView,_=this._sDialog.hourView,m=this._sDialog.picker,h=this._sDialog.needle,p=this._sDialog.dotSpan,u="mddtp-picker__color--active",g="mddtp-picker--inactive",v="mddtp-picker__years--invisible",D="zoomIn",f="zoomOut",k="mddtp-picker__circularView--hidden",C="mddtp-picker__selection";t.dialog.state=!1,t.dialog.view=!0,this._sDialog.picker.classList.add(f),"date"===this._type?(i.classList.remove(D,f),i.classList.add(v),a.classList.remove(u),s.classList.add(u),d.classList.remove(f)):(l.classList.remove(u),n.classList.remove(u),o.classList.remove(u),c.classList.add(u),r.classList.add(k),_.classList.remove(k),s.setAttribute("style","display: none"),p.setAttribute("style","display: none"),h.className=C),setTimeout(function(){e._sDialog.picker.classList.remove("mddtp-picker--portrait"),e._sDialog.picker.classList.remove(f),e._sDialog.picker.classList.add(g);var t=m.cloneNode(!0);m.parentNode.replaceChild(t,m)},300)}},{key:"_buildDialog",value:function(){var t=this._type,e=document.createDocumentFragment(),i=document.createElement("div"),a=document.createElement("div"),s=document.createElement("div"),d=document.createElement("div"),l=document.createElement("button"),n=document.createElement("button");if(i.id="mddtp-picker__"+t,i.classList.add("mddtp-picker"),i.classList.add("mddtp-picker-"+t),i.classList.add("mddtp-picker--inactive"),i.classList.add("animated"),this._addId(a,"header"),this._addClass(a,"header"),i.appendChild(a),this._addClass(s,"body"),s.appendChild(d),i.appendChild(s),"date"===this._type){var o=document.createElement("div"),c=document.createElement("div"),r=document.createElement("div"),_=document.createElement("div"),m=document.createElement("div"),h=document.createElement("ul"),p=document.createElement("li"),u=document.createElement("li"),g=document.createElement("li"),v=document.createElement("button"),D=document.createElement("button"),f=document.createElement("ul");this._addId(o,"subtitle"),this._addClass(o,"subtitle"),this._addId(c,"title"),this._addClass(c,"title",["mddtp-picker__color--active"]),this._addId(r,"titleDay"),this._addId(_,"titleMonth"),c.appendChild(r),c.appendChild(_),a.appendChild(o),a.appendChild(c),this._addId(m,"viewHolder"),this._addClass(m,"viewHolder",["animated"]),this._addClass(h,"views"),this._addId(p,"previous"),p.classList.add("mddtp-picker__view"),this._addId(u,"current"),u.classList.add("mddtp-picker__view"),this._addId(g,"next"),g.classList.add("mddtp-picker__view"),this._addView(p),this._addView(u),this._addView(g),m.appendChild(h),h.appendChild(p),h.appendChild(u),h.appendChild(g),this._addId(v,"left"),v.classList.add("mddtp-button"),this._addClass(v,"left"),v.setAttribute("type","button"),this._addId(D,"right"),D.classList.add("mddtp-button"),this._addClass(D,"right"),D.setAttribute("type","button"),this._addId(f,"years"),this._addClass(f,"years",["mddtp-picker__years--invisible","animated"]),s.appendChild(m),s.appendChild(v),s.appendChild(D),s.appendChild(f)}else{var k=document.createElement("div"),C=document.createElement("span"),L=document.createElement("span"),y=document.createElement("span"),b=document.createElement("div"),w=document.createElement("div"),E=document.createElement("div"),I=document.createElement("div"),M=document.createElement("div"),x=document.createElement("span"),T=document.createElement("span"),A=document.createElement("span"),V=document.createElement("div"),N=document.createElement("div"),B=document.createElement("div");this._addId(k,"title"),this._addClass(k,"title"),this._addId(C,"hour"),C.classList.add("mddtp-picker__color--active"),L.textContent=":",this._addId(L,"dotSpan"),L.setAttribute("style","display: none"),this._addId(y,"minute"),this._addId(b,"subtitle"),this._addClass(b,"subtitle"),b.setAttribute("style","display: none"),this._addId(w,"AM"),w.textContent="AM",this._addId(E,"PM"),E.textContent="PM",k.appendChild(C),k.appendChild(L),k.appendChild(y),b.appendChild(w),b.appendChild(E),a.appendChild(k),a.appendChild(b),this._addId(I,"circularHolder"),this._addClass(I,"circularHolder"),this._addId(M,"needle"),M.classList.add("mddtp-picker__selection"),this._addClass(x,"dot"),this._addClass(T,"line"),this._addId(A,"circle"),this._addClass(A,"circle"),this._addId(V,"minuteView"),V.classList.add("mddtp-picker__circularView"),V.classList.add("mddtp-picker__circularView--hidden"),this._addId(N,"fakeNeedle"),N.classList.add("mddtp-picker__circle--fake"),this._addId(B,"hourView"),B.classList.add("mddtp-picker__circularView"),M.appendChild(x),M.appendChild(T),M.appendChild(A),I.appendChild(M),I.appendChild(V),I.appendChild(N),I.appendChild(B),s.appendChild(I)}d.classList.add("mddtp-picker__action"),this._addId(l,"cancel"),l.classList.add("mddtp-button"),l.setAttribute("type","button"),this._addId(n,"ok"),n.classList.add("mddtp-button"),n.setAttribute("type","button"),d.appendChild(l),d.appendChild(n),s.appendChild(d),e.appendChild(i),document.getElementsByTagName("body").item(0).appendChild(e)}},{key:"_initTimeDialog",value:function(t){var e=this._sDialog.hour,i=this._sDialog.minute,a=this._sDialog.subtitle,s=this._sDialog.dotSpan;if(this._mode){var d=parseInt(t.format("H"),10);0===d&&(d="00"),this._fillText(e,d),this._colon&&s.removeAttribute("style")}else this._fillText(e,t.format("h")),this._sDialog[t.format("A")].classList.add("mddtp-picker__color--active"),a.removeAttribute("style"),s.removeAttribute("style");this._fillText(i,t.format("mm")),this._initHour(),this._initMinute(),this._attachEventHandlers(),this._changeM(),this._dragDial(),this._switchToView(e),this._switchToView(i),this._addClockEvent(),this._setButtonText()}},{key:"_initHour",value:function(){var t=this._sDialog.hourView,e=this._sDialog.needle,i="mddtp-hour__selected",a="mddtp-picker__cell--selected",s="mddtp-picker__cell--rotate-",d="mddtp-picker__cell",l=document.createDocumentFragment(),n=void 0;if(this._mode){n=parseInt(this._sDialog.tDate.format("H"),10);for(var o=1,c=5;24>=o;o++,c+=5){var r=document.createElement("div"),_=document.createElement("span");r.classList.add(d),24===o?_.textContent="00":_.textContent=o,r.classList.add(s+c),n===o&&(r.id=i,r.classList.add(a),e.classList.add(s+c)),24===o&&0===n&&(r.id=i,r.classList.add(a),e.classList.add(s+c)),r.appendChild(_),l.appendChild(r)}}else{n=parseInt(this._sDialog.tDate.format("h"),10);for(var m=1,h=10;12>=m;m++,h+=10){var p=document.createElement("div"),u=document.createElement("span");p.classList.add(d),u.textContent=m,p.classList.add(s+h),n===m&&(p.id=i,p.classList.add(a),e.classList.add(s+h)),p.appendChild(u),l.appendChild(p)}}for(;t.lastChild;)t.removeChild(t.lastChild);t.appendChild(l)}},{key:"_initMinute",value:function(){for(var t=this._sDialog.minuteView,e=parseInt(this._sDialog.tDate.format("m"),10),i="mddtp-minute__selected",a="mddtp-picker__cell--selected",s="mddtp-picker__cell--rotate-",d="mddtp-picker__cell",l=document.createDocumentFragment(),n=5,o=10;60>=n;n+=5,o+=10){var c=document.createElement("div"),r=document.createElement("span");c.classList.add(d),60===n?r.textContent=this._numWithZero(0):r.textContent=this._numWithZero(n),0===e&&(e=60),c.classList.add(s+o),(e===n||e-1===n||e+1===n||1===e&&60===n)&&(c.id=i,c.classList.add(a)),c.appendChild(r),l.appendChild(c)}for(;t.lastChild;)t.removeChild(t.lastChild);t.appendChild(l)}},{key:"_initDateDialog",value:function(t){var e=this._sDialog.subtitle,i=this._sDialog.title,a=this._sDialog.titleDay,s=this._sDialog.titleMonth;this._fillText(e,t.format("YYYY")),this._fillText(a,t.format("ddd, ")),this._fillText(s,t.format("MMM D")),this._initYear(),this._initViewHolder(),this._attachEventHandlers(),this._changeMonth(),this._switchToView(e),this._switchToView(i),this._setButtonText()}},{key:"_initViewHolder",value:function(){var t=this._sDialog.tDate,e=(this._sDialog.picker,this._sDialog.current),i=this._sDialog.previous,a=this._sDialog.next,s=this._past,d=this._future;t.isBefore(s,"month")&&(t=s.clone()),t.isAfter(d,"month")&&(t=d.clone()),this._sDialog.tDate=t,this._initMonth(e,t),this._initMonth(a,moment(this._getMonth(t,1))),this._initMonth(i,moment(this._getMonth(t,-1))),this._toMoveMonth()}},{key:"_initMonth",value:function(t,e){var i=e.format("MMMM YYYY"),a=t.getElementsByTagName("div");this._fillText(a[0],i);var s=document.createDocumentFragment(),d=a[3],l=parseInt(moment(e).date(1).day(),10),n=-1,o=-1,c=parseInt(moment(e).endOf("month").format("D"),10)+l-1,r=l,_="mddtp-picker__cell",m=c;moment().isSame(e,"month")&&(n=parseInt(moment().format("D"),10),n+=l-1),this._past.isSame(e,"month")&&(r=parseInt(this._past.format("D"),10),r+=l-1),this._future.isSame(e,"month")&&(m=parseInt(this._future.format("D"),10),m+=l-1),this._sDialog.sDate.isSame(e,"month")&&(o=parseInt(moment(e).format("D"),10),o+=l-1);for(var h=0;42>h;h++){var p=document.createElement("span"),u=h-l+1;h>=l&&c>=h&&(h>m||r>h?p.classList.add(_+"--disabled"):p.classList.add(_),this._fillText(p,u)),n===h&&p.classList.add(_+"--today"),o===h&&(p.classList.add(_+"--selected"),p.id="mddtp-date__selected"),s.appendChild(p)}for(;d.lastChild;)d.removeChild(d.lastChild);d.appendChild(s),this._addCellClickEvent(d)}},{key:"_initYear",value:function(){for(var t=this._sDialog.years,e=this._sDialog.tDate.year(),i=document.createDocumentFragment(),a=this._past.year(),s=this._future.year(),d=a;s>=d;d++){var l=document.createElement("li");l.textContent=d,d===e&&(l.id="mddtp-date__currentYear",l.classList.add("mddtp-picker__li--current")),i.appendChild(l)}for(;t.lastChild;)t.removeChild(t.lastChild);t.appendChild(i),this._changeYear(t)}},{key:"_switchToView",value:function(t){var e=this;"date"==this._type?t.onclick=function(){e._switchToDateView(t,e)}:t.onclick=function(){e._switchToTimeView(e)}}},{key:"_switchToTimeView",value:function(e){var i=e._sDialog.hourView,a=e._sDialog.minuteView,s=e._sDialog.hour,d=e._sDialog.minute,l="mddtp-picker__color--active",n="mddtp-picker__circularView--hidden",o="mddtp-picker__selection",c=e._sDialog.needle,r=e._sDialog.circularHolder,_=e._sDialog.circle,m=e._sDialog.fakeNeedle,h=60,p=void 0;i.classList.toggle(n),a.classList.toggle(n),s.classList.toggle(l),d.classList.toggle(l),c.className="",c.classList.add(o),t.dialog.view?(p=e._sDialog.sDate.format("m"),setTimeout(function(){var t=r.getBoundingClientRect(),e=_.getBoundingClientRect();m.setAttribute("style","left:"+(e.left-t.left)+"px;top:"+(e.top-t.top)+"px")},300)):e._mode?(h=24,p=parseInt(e._sDialog.sDate.format("H"),10),0===p&&(p=24)):(h=12,p=e._sDialog.sDate.format("h"));var u=e._calcRotation(h,parseInt(p,10));u&&c.classList.add(u),t.dialog.view=!t.dialog.view}},{key:"_switchToDateView",value:function(e,i){e.setAttribute("disabled","");var a=i._sDialog.viewHolder,s=i._sDialog.years,d=i._sDialog.title,l=i._sDialog.subtitle,n=document.getElementById("mddtp-date__currentYear");t.dialog.view?(a.classList.add("zoomOut"),s.classList.remove("mddtp-picker__years--invisible"),s.classList.add("zoomIn"),n.scrollIntoViewIfNeeded()):(s.classList.add("zoomOut"),a.classList.remove("zoomOut"),a.classList.add("zoomIn"),setTimeout(function(){s.classList.remove("zoomIn","zoomOut"),s.classList.add("mddtp-picker__years--invisible"),a.classList.remove("zoomIn")},300)),d.classList.toggle("mddtp-picker__color--active"),l.classList.toggle("mddtp-picker__color--active"),t.dialog.view=!t.dialog.view,setTimeout(function(){e.removeAttribute("disabled")},300)}},{key:"_addClockEvent",value:function(){var t=this,e=this._sDialog.hourView,i=this._sDialog.minuteView,a="mddtp-picker__cell--selected";e.onclick=function(e){var i="mddtp-hour__selected",s=document.getElementById(i),d=0;e.target&&"SPAN"==e.target.nodeName&&(s.id="",s.classList.remove(a),e.target.parentNode.classList.add(a),e.target.parentNode.id=i,d=t._mode?parseInt(e.target.textContent,10):"AM"===t._sDialog.sDate.format("A")?e.target.textContent:parseInt(e.target.textContent,10)+12,t._sDialog.sDate.hour(d),t._sDialog.hour.textContent=e.target.textContent,t._switchToTimeView(t))},i.onclick=function(e){var i="mddtp-minute__selected",s=document.getElementById(i),d=0;e.target&&"SPAN"==e.target.nodeName&&(s&&(s.id="",s.classList.remove(a)),e.target.parentNode.classList.add(a),e.target.parentNode.id=i,d=e.target.textContent,t._sDialog.sDate.minute(d),t._sDialog.minute.textContent=d,t._switchToTimeView(t))}}},{key:"_addCellClickEvent",value:function(t){var e=this;t.onclick=function(t){if(t.target&&"SPAN"==t.target.nodeName&&t.target.classList.contains("mddtp-picker__cell")){var i=(e._sDialog.picker,t.target.textContent),a=e._sDialog.tDate.date(i),s="mddtp-date__selected",d="mddtp-picker__cell--selected",l=document.getElementById(s),n=e._sDialog.subtitle,o=e._sDialog.titleDay,c=e._sDialog.titleMonth;l&&(l.classList.remove(d),l.id=""),t.target.classList.add(d),t.target.id=s,e._sDialog.sDate=a.clone(),e._fillText(n,a.year()),e._fillText(o,a.format("ddd, ")),e._fillText(c,a.format("MMM D"))}}}},{key:"_toMoveMonth",value:function(){var t=this._sDialog.tDate,e=this._sDialog.left,i=this._sDialog.right,a=this._past,s=this._future;e.removeAttribute("disabled"),i.removeAttribute("disabled"),e.classList.remove("mddtp-button--disabled"),i.classList.remove("mddtp-button--disabled"),t.isSame(a,"month")&&(e.setAttribute("disabled",""),e.classList.add("mddtp-button--disabled")),t.isSame(s,"month")&&(i.setAttribute("disabled",""),i.classList.add("mddtp-button--disabled"))}},{key:"_changeMonth",value:function(){function t(t,s){var d=!1,n=e._sDialog.next,o=e._sDialog.current,c=e._sDialog.previous;i.setAttribute("disabled",""),a.setAttribute("disabled",""),o.classList.add(t),c.classList.add(t),n.classList.add(t);var r=s.cloneNode(!0),_=void 0;s===n?(_=c,o.parentNode.appendChild(r),n.id=o.id,o.id=c.id,c=o,o=n,n=r):(d=!0,_=n,c.id=o.id,o.id=n.id,n=o,o=c),setTimeout(function(){s===c&&(o.parentNode.insertBefore(r,o),c=r),e._sDialog.next=n,e._sDialog.current=o,e._sDialog.previous=c,o.classList.add(l),n.classList.add(l),c.classList.add(l),o.classList.remove(t),n.classList.remove(t),c.classList.remove(t),_.parentNode.removeChild(_)},300),setTimeout(function(){o.classList.remove(l),n.classList.remove(l),c.classList.remove(l),d?e._sDialog.tDate=e._getMonth(e._sDialog.tDate,-1):e._sDialog.tDate=e._getMonth(e._sDialog.tDate,1),e._initViewHolder()},350),setTimeout(function(){i.classList.contains("mddtp-button--disabled")||i.removeAttribute("disabled"),a.classList.contains("mddtp-button--disabled")||a.removeAttribute("disabled")},400)}var e=this,i=this._sDialog.left,a=this._sDialog.right,s="mddtp-picker__view--left",d="mddtp-picker__view--right",l="mddtp-picker__view--pause";i.onclick=function(){t(d,e._sDialog.previous)},a.onclick=function(){t(s,e._sDialog.next)}}},{key:"_changeYear",value:function(t){var e=this;t.onclick=function(i){if(i.target&&"LI"==i.target.nodeName){var a=document.getElementById("mddtp-date__currentYear");a.id="",a.classList.remove("mddtp-picker__li--current"),i.target.id="mddtp-date__currentYear",i.target.classList.add("mddtp-picker__li--current"),e._switchToDateView(t,e),e._sDialog.tDate.year(parseInt(i.target.textContent,10)),e._initViewHolder()}}}},{key:"_changeM",value:function(){var t=this,e=this._sDialog.AM,i=this._sDialog.PM;e.onclick=function(a){var s=t._sDialog.sDate.format("A");"PM"===s&&(t._sDialog.sDate.subtract(12,"h"),e.classList.toggle("mddtp-picker__color--active"),i.classList.toggle("mddtp-picker__color--active"))},i.onclick=function(a){var s=t._sDialog.sDate.format("A");"AM"===s&&(t._sDialog.sDate.add(12,"h"),e.classList.toggle("mddtp-picker__color--active"),i.classList.toggle("mddtp-picker__color--active"))}}},{key:"_dragDial",value:function(){var t=this,e=this._sDialog.needle,i=this._sDialog.circle,a=this._sDialog.fakeNeedle,s=this._sDialog.circularHolder,d=this._sDialog.minute,l="mddtp-picker__selection--quick",n="mddtp-picker__selection",o="mddtp-picker__cell--selected",c="mddtp-picker__cell--rotate-",r=s.getBoundingClientRect(),_=void 0,m=new Draggabilly(a,{containment:!0});m.on("pointerDown",function(){r=s.getBoundingClientRect()}),m.on("dragMove",function(t){var i=t.clientX-r.left-r.width/2,a=t.clientY-r.top-r.height/2,s=Math.atan2(-a,i);e.className="",0>s&&(s+=2*Math.PI),s*=180/Math.PI,s=360-s,s>270&&(s-=360),_=parseInt(s/6);var d=Math.abs(6*_-s),o=Math.abs(6*(_+1)-s);d>o&&_++,_+=15,e.classList.add(n),e.classList.add(l),e.classList.add(c+2*_)}),m.on("dragEnd",function(){var s=t._sDialog.minuteView.getElementsByTagName("div"),n="mddtp-minute__selected",c=document.getElementById(n),m=i.getBoundingClientRect();a.setAttribute("style","left:"+(m.left-r.left)+"px;top:"+(m.top-r.top)+"px"),e.classList.remove(l);var h=_;1===h&&(h=60),h=t._nearestDivisor(h,5),60===_&&(_=0),c&&(c.id="",c.classList.remove(o)),h>0&&(h/=5,h--,s[h].id=n,s[h].classList.add(o)),d.textContent=t._numWithZero(_),t._sDialog.sDate.minutes(_)})}},{key:"_attachEventHandlers",value:function(){var t=this,e=this._sDialog.ok,i=this._sDialog.cancel,a=new CustomEvent("onCancel"),s=new CustomEvent("onOk");i.onclick=function(){t.toggle(),t._trigger&&t._trigger.dispatchEvent(a)},e.onclick=function(){t._init=t._sDialog.sDate,t.toggle(),t._trigger&&t._trigger.dispatchEvent(s)}}},{key:"_setButtonText",value:function(){this._sDialog.cancel.textContent=this._cancel,this._sDialog.ok.textContent=this._ok}},{key:"_getMonth",value:function(t,e){var i=void 0;return i=t.clone(),e>0?i.add(Math.abs(e),"M"):i.subtract(Math.abs(e),"M")}},{key:"_nearestDivisor",value:function(t,e){return t%e===0?t:(t-1)%e===0?t-1:(t+1)%e===0?t+1:-1}},{key:"_numWithZero",value:function(t){return t>9?""+t:"0"+t}},{key:"_fillText",value:function(t,e){t.firstChild?t.firstChild.nodeValue=e:t.appendChild(document.createTextNode(e))}},{key:"_addId",value:function(t,e){t.id="mddtp-"+this._type+"__"+e}},{key:"_addClass",value:function(t,e,i){t.classList.add("mddtp-picker__"+e);var a=0;for(i&&(a=i.length,i.reverse());a--;)t.classList.add(i[a])}},{key:"_addView",value:function(t){for(var e=document.createElement("div"),i=document.createElement("div"),a=document.createElement("div"),s=document.createElement("div"),d=["S","F","T","W","T","M","S"],l=7;l--;){var n=document.createElement("span");n.textContent=d[l],a.appendChild(n)}this._addClass(e,"month"),this._addClass(i,"grid"),this._addClass(a,"th"),this._addClass(s,"tr"),t.appendChild(e),t.appendChild(i),i.appendChild(a),i.appendChild(s)}},{key:"_calcRotation",value:function(t,e){return e*=12===t?10:24===t?5:2,60===t&&0===e&&(e=120),"mddtp-picker__cell--rotate-"+e}},{key:"time",get:function(){return this._init},set:function(t){t&&(this._init=t)}},{key:"trigger",get:function(){return this._trigger},set:function(t){t&&(this._trigger=t)}}],[{key:"dialog",get:function(){return a},set:function(e){t.dialog=e}}]),t}();t["default"]=s});
\ No newline at end of file
diff --git a/src/js/mdDateTimePicker.js b/src/js/mdDateTimePicker.js
index 4a1164a..b3a7335 100644
--- a/src/js/mdDateTimePicker.js
+++ b/src/js/mdDateTimePicker.js
@@ -21,19 +21,20 @@ export default class mdDateTimePicker {
 	*
 	* @method constructor
 	*
-	* @param  {string}   type = 'date' or 'time 									[type of dialog]
+	* @param  {String}   type = 'date' or 'time 									[type of dialog]
 	* @param  {moment}   init 																		[initial value for the dialog date or time, defaults to today] [@default = today]
 	* @param  {moment}   past 																		[the past moment till which the calendar shall render] [@default = exactly 21 Years ago from init]
 	* @param  {moment}   future           												[the future moment till which the calendar shall render] [@default = init]
 	* @param	{Boolean}  mode 																		[this value tells whether the time dialog will have the 24 hour mode (true) or 12 hour mode (false)] [@default = false]
-	* @param  {string}   orientation = 'LANDSCAPE' or 'PORTRAIT'  [force the orientation of the picker @default = 'LANDSCAPE']
+	* @param  {String}   orientation = 'LANDSCAPE' or 'PORTRAIT'  [force the orientation of the picker @default = 'LANDSCAPE']
 	* @param  {element}  trigger																	[element on which all the events will be dispatched e.g var foo = document.getElementById('bar'), here element = foo]
-	* @param  {string}  ok = 'ok'																	[ok button's text]
-	* @param  {string}  cancel = 'cancel'													[cancel button's text]
+	* @param  {String}  ok = 'ok'																	[ok button's text]
+	* @param  {String}  cancel = 'cancel'													[cancel button's text]
+	* @param  {Boolean} colon = 'cancel'													[add an option to enable quote in 24 hour mode]
 	*
 	* @return {Object}    																				[mdDateTimePicker]
 	*/
-	constructor({type, init = moment(), past = moment().subtract(21, 'years'), future = init, mode = false, orientation = 'LANDSCAPE', trigger = '', ok = 'ok', cancel = 'cancel'}) {
+	constructor({type, init = moment(), past = moment().subtract(21, 'years'), future = init, mode = false, orientation = 'LANDSCAPE', trigger = '', ok = 'ok', cancel = 'cancel', colon = false}) {
 		this._type = type
 		this._init = init
 		this._past = past
@@ -43,6 +44,7 @@ export default class mdDateTimePicker {
 		this._trigger = trigger
 		this._ok = ok
 		this._cancel = cancel
+		this._colon = colon
 
 		/**
 		* [dialog selected classes have the same structure as dialog but one level down]
@@ -435,6 +437,10 @@ export default class mdDateTimePicker {
 				text = '00'
 			}
 			this._fillText(hour, text)
+			// add the configurable colon in this mode issue #56
+			if (this._colon) {
+				dotSpan.removeAttribute('style')
+			}
 		}
 		else {
 			this._fillText(hour, m.format('h'))
@@ -1234,7 +1240,7 @@ export default class mdDateTimePicker {
 	*
 	* @param  {int}     n [description]
 	*
-	* @return {string}     [description]
+	* @return {String}     [description]
 	*/
 	_numWithZero(n) {
 		return n > 9 ? '' + n: '0' + n
@@ -1330,7 +1336,7 @@ export default class mdDateTimePicker {
 	*
 	* @param  {int}      value [value for the spoke]
 	*
-	* @return {string}      [appropriate class]
+	* @return {String}      [appropriate class]
 	*/
 	_calcRotation(spoke, value) {
 		let start = (spoke / 12) * 3