md-date-time-picker-rails 2.0.3a → 2.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2504d6abf78a11ae0629c5ee61e307c8f661f67f
-  data.tar.gz: d9081779d28a6654852387f4963af0ca64d9e1e0
+  metadata.gz: 5bf880e849b6709cf1e0d3bd772edf02de687e18
+  data.tar.gz: ca44b8b38d8150bd1e5c192e9d86f86b1c85de7f
 SHA512:
-  metadata.gz: a6d750ce371eb73c76bbcb8265eaf34b6ae715cb714510d3d26e37eccc6f13e09dbf135f0b51be2722164995258e5a12efbe24fef22a727c067305962e2ec8db
-  data.tar.gz: 96de1a3910d8ae6f64890889724c3d19319c7d9e72617a98b15b77363d8826919c20763488c05abef23729e695759387ed764a914d0ded8d919fa6fd82c02eea
+  metadata.gz: ea44d39cc375e750f3a5267468ddb71c92ff13a801304265d645a82e8a4fe0b41602bd69c36a24de961637d4ecbdc4586e4b276926f625c4f137f3c12b6c1e5b
+  data.tar.gz: 8acf9b8268f3995cddb65fc57c8561b3bc5e081b20bc6ef662f3550c07a8254f8be7da212951e1eb25a99594c05ebf5d83a17eaeda6ca3ab91217124a468938a

data/README.md

@@ -69,7 +69,8 @@ and change the following line:
 
 Currently,  Support Theme List
 
-- `themes/dark/amber`, `themes/dark/blue`, `themes/dark/blue-grey`
+- `themes/dark/amber`, `themes/dark/blue`, `themes/dark/blue-grey`, `themes/dark/cyan`, `themes/dark/deep-orange`, `themes/dark/deep-purple`, `themes/dark/green`, `themes/dark/grey`,`themes/dark/indigo`, `themes/dark/light-blue`, `themes/dark/light-green`, `themes/dark/lime`, `themes/dark/orange`, `themes/dark/pink`, `themes/dark/purple`, `themes/dark/red`, `themes/dark/teal`, `themes/dark/yellow`
+- `themes/light/amber`, `themes/light/blue`, `themes/light/blue-grey`, `themes/light/cyan`, `themes/light/deep-orange`, `themes/light/deep-purple`, `themes/light/green`, `themes/light/grey`,`themes/light/indigo`, `themes/light/light-blue`, `themes/light/light-green`, `themes/light/lime`, `themes/light/orange`, `themes/light/pink`, `themes/light/purple`, `themes/light/red`, `themes/light/teal`, `themes/light/yellow`
 
 
 

data/lib/md-date-time-picker-rails/version.rb

@@ -1,5 +1,5 @@
 module MdDateTimePicker
   module Rails
-    VERSION = "2.0.3a"
+    VERSION = "2.0.4"
   end
 end

data/vendor/assets/javascripts/mdDateTimePickerLocale.js

@@ -0,0 +1,1253 @@
+(function (global, factory) {
+	if (typeof define === "function" && define.amd) {
+		define(['exports'], factory);
+	} else if (typeof exports !== "undefined") {
+		factory(exports);
+	} else {
+		var mod = {
+			exports: {}
+		};
+		factory(mod.exports);
+		global.mdDateTimePicker = mod.exports;
+	}
+})(this, function (exports) {
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+		value: true
+	});
+
+	function _classCallCheck(instance, Constructor) {
+		if (!(instance instanceof Constructor)) {
+			throw new TypeError("Cannot call a class as a function");
+		}
+	}
+
+	var _createClass = function () {
+		function defineProperties(target, props) {
+			for (var i = 0; i < props.length; i++) {
+				var descriptor = props[i];
+				descriptor.enumerable = descriptor.enumerable || !1;
+				descriptor.configurable = !0;
+				if ("value" in descriptor) descriptor.writable = !0;
+				Object.defineProperty(target, descriptor.key, descriptor);
+			}
+		}
+
+		return function (Constructor, protoProps, staticProps) {
+			if (protoProps) defineProperties(Constructor.prototype, protoProps);
+			if (staticProps) defineProperties(Constructor, staticProps);
+			return Constructor;
+		};
+	}(),
+	    _dialog = {
+		view: !0,
+		state: !1
+	},
+	    mdDateTimePicker = function () {
+		/**
+  * [constructor of the mdDateTimePicker]
+  *
+  * @method constructor
+  *
+  * @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  {[moment]}   locale           												[the future moment locale render] [@default = en]
+  * @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  {[element]}  trigger																	[element on which all the events will be dispatched e.g var foo = document.getElementById('bar'), here element = foo]
+  *
+  * @return {[Object]}    																				[mdDateTimePicker]
+  */
+
+		function mdDateTimePicker(_ref) {
+			var type = _ref.type,
+			    _ref$init = _ref.init,
+			    init = _ref$init === undefined ? moment() : _ref$init,
+			    _ref$past = _ref.past,
+			    past = _ref$past === undefined ? moment().subtract(21, 'years') : _ref$past,
+			    _ref$future = _ref.future,
+			    future = _ref$future === undefined ? init : _ref$future,
+			    _ref$mode = _ref.mode,
+			    mode = _ref$mode === undefined ? !1 : _ref$mode,
+			    _ref$orientation = _ref.orientation,
+			    orientation = _ref$orientation === undefined ? 'LANDSCAPE' : _ref$orientation,
+			    _ref$trigger = _ref.trigger,
+			    trigger = _ref$trigger === undefined ? '' : _ref$trigger;
+
+
+			_classCallCheck(this, mdDateTimePicker);
+
+			this._type = type;
+			this._init = init;
+			this._past = past;
+			this._future = future;
+			this._mode = mode;
+			this._orientation = orientation;
+			this._trigger = trigger;
+
+
+			/**
+   * [dialog selected classes have the same structure as dialog but one level down]
+   * @type {Object}
+   * e.g
+   * sDialog = {
+   *   picker: 'some-picker-selected'
+   * }
+   */
+			this._sDialog = {};
+			// attach the dialog if not present
+			if (!document.getElementById('mddtp-picker__' + this._type)) {
+				this._buildDialog();
+			}
+		}
+
+		/**
+  * [time to get or set the current picker's moment]
+  *
+  * @method time
+  *
+  * @param  {[moment]} m
+  *
+  */
+
+
+		_createClass(mdDateTimePicker, [{
+			key: 'toggle',
+			value: function toggle() {
+				this._selectDialog();
+				// work according to the current state of the dialog
+				if (mdDateTimePicker.dialog.state) {
+					this._hideDialog();
+				} else {
+					if (this._type === 'date') {
+						this._initDateDialog(this._init);
+					} else if (this._type === 'time') {
+						this._initTimeDialog(this._init);
+					}
+					this._showDialog();
+				}
+			}
+		}, {
+			key: '_selectDialog',
+			value: function _selectDialog() {
+				// now do what you normally would do
+				this._sDialog.picker = document.getElementById('mddtp-picker__' + [this._type]);
+				/**
+    * [sDialogEls stores all inner components of the selected dialog or sDialog to be later getElementById]
+    *
+    * @type {Array}
+    */
+				var sDialogEls = ['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'],
+				    i = sDialogEls.length;
+
+				while (i--) {
+					this._sDialog[sDialogEls[i]] = document.getElementById('mddtp-' + this._type + '__' + sDialogEls[i]);
+				}
+
+				this._sDialog.tDate = this._init.clone();
+				this._sDialog.sDate = this._init.clone();
+			}
+		}, {
+			key: '_showDialog',
+			value: function _showDialog() {
+				var me = this,
+				    zoomIn = 'zoomIn';
+
+				mdDateTimePicker.dialog.state = !0;
+				this._sDialog.picker.classList.remove('mddtp-picker--inactive');
+				this._sDialog.picker.classList.add(zoomIn);
+				// if the dialog is forced into portrait mode
+				if (this._orientation === 'PORTRAIT') {
+					this._sDialog.picker.classList.add('mddtp-picker--portrait');
+				}
+				setTimeout(function () {
+					me._sDialog.picker.classList.remove(zoomIn);
+				}, 300);
+			}
+		}, {
+			key: '_hideDialog',
+			value: function _hideDialog() {
+				var me = this,
+				    years = this._sDialog.years,
+				    title = me._sDialog.title,
+				    subtitle = me._sDialog.subtitle,
+				    viewHolder = this._sDialog.viewHolder,
+				    AM = this._sDialog.AM,
+				    PM = this._sDialog.PM,
+				    minute = this._sDialog.minute,
+				    hour = this._sDialog.hour,
+				    minuteView = this._sDialog.minuteView,
+				    hourView = this._sDialog.hourView,
+				    picker = this._sDialog.picker,
+				    needle = this._sDialog.needle,
+				    dotSpan = this._sDialog.dotSpan,
+				    active = 'mddtp-picker__color--active',
+				    inactive = 'mddtp-picker--inactive',
+				    invisible = 'mddtp-picker__years--invisible',
+				    zoomIn = 'zoomIn',
+				    zoomOut = 'zoomOut',
+				    hidden = 'mddtp-picker__circularView--hidden',
+				    selection = 'mddtp-picker__selection';
+
+				mdDateTimePicker.dialog.state = !1;
+				mdDateTimePicker.dialog.view = !0;
+				this._sDialog.picker.classList.add(zoomOut);
+				// reset classes
+				if (this._type === 'date') {
+					years.classList.remove(zoomIn, zoomOut);
+					years.classList.add(invisible);
+					title.classList.remove(active);
+					subtitle.classList.add(active);
+					viewHolder.classList.remove(zoomOut);
+				} else {
+					AM.classList.remove(active);
+					PM.classList.remove(active);
+					minute.classList.remove(active);
+					hour.classList.add(active);
+					minuteView.classList.add(hidden);
+					hourView.classList.remove(hidden);
+					subtitle.setAttribute('style', 'display: none');
+					dotSpan.setAttribute('style', 'display: none');
+					needle.className = selection;
+				}
+				setTimeout(function () {
+					// remove portrait mode
+					me._sDialog.picker.classList.remove('mddtp-picker--portrait');
+					me._sDialog.picker.classList.remove(zoomOut);
+					me._sDialog.picker.classList.add(inactive);
+					// clone elements and add them again to clear events attached to them
+					var pickerClone = picker.cloneNode(!0);
+					picker.parentNode.replaceChild(pickerClone, picker);
+				}, 300);
+			}
+		}, {
+			key: '_buildDialog',
+			value: function _buildDialog() {
+				var type = this._type,
+				    docfrag = document.createDocumentFragment(),
+				    container = document.createElement('div'),
+				    header = document.createElement('div'),
+				    body = document.createElement('div'),
+				    action = document.createElement('div'),
+				    cancel = document.createElement('button'),
+				    ok = document.createElement('button');
+				// outer most container of the picker
+
+				// header container of the picker
+
+				// body container of the picker
+
+				// action elements container
+
+				// ... add properties to them
+				container.id = 'mddtp-picker__' + type;
+				container.classList.add('mddtp-picker');
+				container.classList.add('mddtp-picker-' + type);
+				container.classList.add('mddtp-picker--inactive');
+				container.classList.add('animated');
+				this._addId(header, 'header');
+				this._addClass(header, 'header');
+				// add header to container
+				container.appendChild(header);
+				this._addClass(body, 'body');
+				body.appendChild(action);
+				// add body to container
+				container.appendChild(body);
+				// add stuff to header and body according to dialog type
+				if (this._type === 'date') {
+					var subtitle = document.createElement('div'),
+					    title = document.createElement('div'),
+					    titleDay = document.createElement('div'),
+					    titleMonth = document.createElement('div'),
+					    viewHolder = document.createElement('div'),
+					    views = document.createElement('ul'),
+					    previous = document.createElement('li'),
+					    current = document.createElement('li'),
+					    next = document.createElement('li'),
+					    left = document.createElement('button'),
+					    right = document.createElement('button'),
+					    years = document.createElement('ul');
+
+					// inside header
+					// adding properties to them
+					this._addId(subtitle, 'subtitle');
+					this._addClass(subtitle, 'subtitle');
+					this._addId(title, 'title');
+					this._addClass(title, 'title', ['mddtp-picker__color--active']);
+					this._addId(titleDay, 'titleDay');
+					this._addId(titleMonth, 'titleMonth');
+					// add title stuff to it
+					title.appendChild(titleDay);
+					title.appendChild(titleMonth);
+					// add them to header
+					header.appendChild(subtitle);
+					header.appendChild(title);
+					// inside body
+					// inside viewHolder
+					this._addId(viewHolder, 'viewHolder');
+					this._addClass(viewHolder, 'viewHolder', ['animated']);
+					this._addClass(views, 'views');
+					this._addId(previous, 'previous');
+					previous.classList.add('mddtp-picker__view');
+					this._addId(current, 'current');
+					current.classList.add('mddtp-picker__view');
+					this._addId(next, 'next');
+					next.classList.add('mddtp-picker__view');
+					// fill the views
+					this._addView(previous);
+					this._addView(current);
+					this._addView(next);
+					// add them
+					viewHolder.appendChild(views);
+					views.appendChild(previous);
+					views.appendChild(current);
+					views.appendChild(next);
+					// inside body again
+					this._addId(left, 'left');
+					left.classList.add('mddtp-button');
+					this._addClass(left, 'left');
+					left.setAttribute('type', 'button');
+					this._addId(right, 'right');
+					right.classList.add('mddtp-button');
+					this._addClass(right, 'right');
+					right.setAttribute('type', 'button');
+					this._addId(years, 'years');
+					this._addClass(years, 'years', ['mddtp-picker__years--invisible', 'animated']);
+					// add them to body
+					body.appendChild(viewHolder);
+					body.appendChild(left);
+					body.appendChild(right);
+					body.appendChild(years);
+				} else {
+					var _title = document.createElement('div'),
+					    hour = document.createElement('span'),
+					    span = document.createElement('span'),
+					    minute = document.createElement('span'),
+					    _subtitle = document.createElement('div'),
+					    AM = document.createElement('div'),
+					    PM = document.createElement('div'),
+					    circularHolder = document.createElement('div'),
+					    needle = document.createElement('div'),
+					    dot = document.createElement('span'),
+					    line = document.createElement('span'),
+					    circle = document.createElement('span'),
+					    minuteView = document.createElement('div'),
+					    fakeNeedle = document.createElement('div'),
+					    hourView = document.createElement('div');
+
+					// add properties to them
+					// inside header
+					this._addId(_title, 'title');
+					this._addClass(_title, 'title');
+					this._addId(hour, 'hour');
+					hour.classList.add('mddtp-picker__color--active');
+					span.textContent = ':';
+					this._addId(span, 'dotSpan');
+					span.setAttribute('style', 'display: none');
+					this._addId(minute, 'minute');
+					this._addId(_subtitle, 'subtitle');
+					this._addClass(_subtitle, 'subtitle');
+					_subtitle.setAttribute('style', 'display: none');
+					this._addId(AM, 'AM');
+					AM.textContent = 'AM';
+					this._addId(PM, 'PM');
+					PM.textContent = 'PM';
+					// add them to title and subtitle
+					_title.appendChild(hour);
+					_title.appendChild(span);
+					_title.appendChild(minute);
+					_subtitle.appendChild(AM);
+					_subtitle.appendChild(PM);
+					// add them to header
+					header.appendChild(_title);
+					header.appendChild(_subtitle);
+					// inside body
+					this._addId(circularHolder, 'circularHolder');
+					this._addClass(circularHolder, 'circularHolder');
+					this._addId(needle, 'needle');
+					needle.classList.add('mddtp-picker__selection');
+					this._addClass(dot, 'dot');
+					this._addClass(line, 'line');
+					this._addId(circle, 'circle');
+					this._addClass(circle, 'circle');
+					this._addId(minuteView, 'minuteView');
+					minuteView.classList.add('mddtp-picker__circularView');
+					minuteView.classList.add('mddtp-picker__circularView--hidden');
+					this._addId(fakeNeedle, 'fakeNeedle');
+					fakeNeedle.classList.add('mddtp-picker__circle--fake');
+					this._addId(hourView, 'hourView');
+					hourView.classList.add('mddtp-picker__circularView');
+					// add them to needle
+					needle.appendChild(dot);
+					needle.appendChild(line);
+					needle.appendChild(circle);
+					// add them to circularHolder
+					circularHolder.appendChild(needle);
+					circularHolder.appendChild(minuteView);
+					circularHolder.appendChild(fakeNeedle);
+					circularHolder.appendChild(hourView);
+					// add them to body
+					body.appendChild(circularHolder);
+				}
+				action.classList.add('mddtp-picker__action');
+				this._addId(cancel, 'cancel');
+				cancel.classList.add('mddtp-button');
+				cancel.setAttribute('type', 'button');
+				cancel.textContent = 'cancel';
+				this._addId(ok, 'ok');
+				ok.classList.add('mddtp-button');
+				ok.setAttribute('type', 'button');
+				ok.textContent = 'ok';
+				// add actions
+				action.appendChild(cancel);
+				action.appendChild(ok);
+				// add actions to body
+				body.appendChild(action);
+				docfrag.appendChild(container);
+				// add the container to the end of body
+				document.getElementsByTagName('body').item(0).appendChild(docfrag);
+			}
+		}, {
+			key: '_initTimeDialog',
+			value: function _initTimeDialog(m) {
+				var hour = this._sDialog.hour,
+				    minute = this._sDialog.minute,
+				    subtitle = this._sDialog.subtitle,
+				    dotSpan = this._sDialog.dotSpan;
+
+				// switch according to 12 hour or 24 hour mode
+				if (this._mode) {
+					this._fillText(hour, m.format('H'));
+				} else {
+					this._fillText(hour, m.format('h'));
+					this._sDialog[m.format('A')].classList.add('mddtp-picker__color--active');
+					subtitle.removeAttribute('style');
+					dotSpan.removeAttribute('style');
+				}
+				this._fillText(minute, m.format('mm'));
+				this._initHour();
+				this._initMinute();
+				this._attachEventHandlers();
+				this._changeM();
+				this._dragDial();
+				this._switchToView(hour);
+				this._switchToView(minute);
+				this._addClockEvent();
+			}
+		}, {
+			key: '_initHour',
+			value: function _initHour() {
+				var hourView = this._sDialog.hourView,
+				    needle = this._sDialog.needle,
+				    hour = 'mddtp-hour__selected',
+				    selected = 'mddtp-picker__cell--selected',
+				    rotate = 'mddtp-picker__cell--rotate-',
+				    cell = 'mddtp-picker__cell',
+				    docfrag = document.createDocumentFragment(),
+				    hourNow = void 0;
+
+				if (this._mode) {
+					hourNow = parseInt(this._sDialog.tDate.format('H'), 10);
+					for (var i = 1, j = 5; i <= 24; i++, j += 5) {
+						var div = document.createElement('div'),
+						    span = document.createElement('span');
+
+						div.classList.add(cell);
+						span.textContent = i;
+						div.classList.add(rotate + j);
+						if (hourNow === i) {
+							div.id = hour;
+							div.classList.add(selected);
+							needle.classList.add(rotate + j);
+						}
+						div.appendChild(span);
+						docfrag.appendChild(div);
+					}
+				} else {
+					hourNow = parseInt(this._sDialog.tDate.format('h'), 10);
+					for (var _i = 1, _j = 10; _i <= 12; _i++, _j += 10) {
+						var _div = document.createElement('div'),
+						    _span = document.createElement('span');
+
+						_div.classList.add(cell);
+						_span.textContent = _i;
+						_div.classList.add(rotate + _j);
+						if (hourNow === _i) {
+							_div.id = hour;
+							_div.classList.add(selected);
+							needle.classList.add(rotate + _j);
+						}
+						_div.appendChild(_span);
+						docfrag.appendChild(_div);
+					}
+				}
+				//empty the hours
+				while (hourView.lastChild) {
+					hourView.removeChild(hourView.lastChild);
+				}
+				// set inner html accordingly
+				hourView.appendChild(docfrag);
+			}
+		}, {
+			key: '_initMinute',
+			value: function _initMinute() {
+				var minuteView = this._sDialog.minuteView,
+				    minuteNow = parseInt(this._sDialog.tDate.format('m'), 10),
+				    sMinute = 'mddtp-minute__selected',
+				    selected = 'mddtp-picker__cell--selected',
+				    rotate = 'mddtp-picker__cell--rotate-',
+				    cell = 'mddtp-picker__cell',
+				    docfrag = document.createDocumentFragment();
+
+				for (var i = 5, j = 10; i <= 60; i += 5, j += 10) {
+					var div = document.createElement('div'),
+					    span = document.createElement('span');
+
+					div.classList.add(cell);
+					if (i === 60) {
+						span.textContent = this._numWithZero(0);
+					} else {
+						span.textContent = this._numWithZero(i);
+					}
+					if (minuteNow === 0) {
+						minuteNow = 60;
+					}
+					div.classList.add(rotate + j);
+					// (minuteNow === 1 && i === 60) for corner case highlight 00 at 01
+					if (minuteNow === i || minuteNow - 1 === i || minuteNow + 1 === i || minuteNow === 1 && i === 60) {
+						div.id = sMinute;
+						div.classList.add(selected);
+					}
+					div.appendChild(span);
+					docfrag.appendChild(div);
+				}
+				//empty the hours
+				while (minuteView.lastChild) {
+					minuteView.removeChild(minuteView.lastChild);
+				}
+				// set inner html accordingly
+				minuteView.appendChild(docfrag);
+			}
+		}, {
+			key: '_initDateDialog',
+			value: function _initDateDialog(m) {
+				var subtitle = this._sDialog.subtitle,
+				    title = this._sDialog.title,
+				    titleDay = this._sDialog.titleDay,
+				    titleMonth = this._sDialog.titleMonth;
+
+				this._fillText(subtitle, m.format('YYYY'));
+				this._fillText(titleDay, m.format('ddd, '));
+				this._fillText(titleMonth, m.format('MMM D'));
+				this._initYear();
+				this._initViewHolder();
+				this._attachEventHandlers();
+				this._changeMonth();
+				this._switchToView(subtitle);
+				this._switchToView(title);
+			}
+		}, {
+			key: '_initViewHolder',
+			value: function _initViewHolder() {
+				var m = this._sDialog.tDate,
+				    picker = this._sDialog.picker,
+				    current = this._sDialog.current,
+				    previous = this._sDialog.previous,
+				    next = this._sDialog.next,
+				    past = this._past,
+				    future = this._future;
+
+				if (m.isBefore(past, 'month')) {
+					m = past.clone();
+				}
+				if (m.isAfter(future, 'month')) {
+					m = future.clone();
+				}
+				this._sDialog.tDate = m;
+				this._initMonth(current, m);
+				this._initMonth(next, moment(this._getMonth(m, 1)));
+				this._initMonth(previous, moment(this._getMonth(m, -1)));
+				this._toMoveMonth();
+			}
+		}, {
+			key: '_initMonth',
+			value: function _initMonth(view, m) {
+				var displayMonth = m.format('MMMM YYYY'),
+				    innerDivs = view.getElementsByTagName('div');
+				// get the .mddtp-picker__month element using innerDivs[0]
+
+				this._fillText(innerDivs[0], displayMonth);
+				var docfrag = document.createDocumentFragment(),
+				    tr = innerDivs[3],
+				    firstDayOfMonth = parseInt(moment(m).date(1).day(), 10),
+				    today = -1,
+				    selected = -1,
+				    lastDayOfMonth = parseInt(moment(m).endOf('month').format('D'), 10) + firstDayOfMonth - 1,
+				    past = firstDayOfMonth,
+				    cellClass = 'mddtp-picker__cell',
+				    future = lastDayOfMonth;
+				// get the .mddtp-picker__tr element using innerDivs[3]
+
+				if (moment().isSame(m, 'month')) {
+					today = parseInt(moment().format('D'), 10);
+					today += firstDayOfMonth - 1;
+				}
+				if (this._past.isSame(m, 'month')) {
+					past = parseInt(this._past.format('D'), 10);
+					past += firstDayOfMonth - 1;
+				}
+				if (this._future.isSame(m, 'month')) {
+					future = parseInt(this._future.format('D'), 10);
+					future += firstDayOfMonth - 1;
+				}
+				if (this._sDialog.sDate.isSame(m, 'month')) {
+					selected = parseInt(moment(m).format('D'), 10);
+					selected += firstDayOfMonth - 1;
+				}
+				for (var i = 0; i < 42; i++) {
+					// create cell
+					var cell = document.createElement('span'),
+					    currentDay = i - firstDayOfMonth + 1;
+
+					if (i >= firstDayOfMonth && i <= lastDayOfMonth) {
+						if (i > future || i < past) {
+							cell.classList.add(cellClass + '--disabled');
+						} else {
+							cell.classList.add(cellClass);
+						}
+						this._fillText(cell, currentDay);
+					}
+					if (today === i) {
+						cell.classList.add(cellClass + '--today');
+					}
+					if (selected === i) {
+						cell.classList.add(cellClass + '--selected');
+						cell.id = 'mddtp-date__selected';
+					}
+					docfrag.appendChild(cell);
+				}
+				//empty the tr
+				while (tr.lastChild) {
+					tr.removeChild(tr.lastChild);
+				}
+				// set inner html accordingly
+				tr.appendChild(docfrag);
+				this._addCellClickEvent(tr);
+			}
+		}, {
+			key: '_initYear',
+			value: function _initYear() {
+				var years = this._sDialog.years,
+				    currentYear = this._sDialog.tDate.year(),
+				    docfrag = document.createDocumentFragment(),
+				    past = this._past.year(),
+				    future = this._future.year();
+
+				for (var year = past; year <= future; year++) {
+					var li = document.createElement('li');
+					li.textContent = year;
+					if (year === currentYear) {
+						li.id = 'mddtp-date__currentYear';
+						li.classList.add('mddtp-picker__li--current');
+					}
+					docfrag.appendChild(li);
+				}
+				//empty the years ul
+				while (years.lastChild) {
+					years.removeChild(years.lastChild);
+				}
+				// set inner html accordingly
+				years.appendChild(docfrag);
+				// attach event handler to the ul to get the benefit of event delegation
+				this._changeYear(years);
+			}
+		}, {
+			key: '_switchToView',
+			value: function _switchToView(el) {
+				var me = this;
+				// attach the view change button
+				if (this._type == 'date') {
+					el.onclick = function () {
+						me._switchToDateView(el, me);
+					};
+				} else {
+					el.onclick = function () {
+						me._switchToTimeView(me);
+					};
+				}
+			}
+		}, {
+			key: '_switchToTimeView',
+			value: function _switchToTimeView(me) {
+				var hourView = me._sDialog.hourView,
+				    minuteView = me._sDialog.minuteView,
+				    hour = me._sDialog.hour,
+				    minute = me._sDialog.minute,
+				    activeClass = 'mddtp-picker__color--active',
+				    hidden = 'mddtp-picker__circularView--hidden',
+				    selection = 'mddtp-picker__selection',
+				    needle = me._sDialog.needle,
+				    circularHolder = me._sDialog.circularHolder,
+				    circle = me._sDialog.circle,
+				    fakeNeedle = me._sDialog.fakeNeedle,
+				    spoke = 60,
+				    value = void 0;
+
+				// toggle view classes
+				hourView.classList.toggle(hidden);
+				minuteView.classList.toggle(hidden);
+				hour.classList.toggle(activeClass);
+				minute.classList.toggle(activeClass);
+				// move the needle to correct position
+				needle.className = '';
+				needle.classList.add(selection);
+				if (mdDateTimePicker.dialog.view) {
+					value = me._sDialog.sDate.format('m');
+					// move the fakeNeedle to correct position
+					setTimeout(function () {
+						var hOffset = circularHolder.getBoundingClientRect(),
+						    cOffset = circle.getBoundingClientRect();
+
+						fakeNeedle.setAttribute('style', 'left:' + (cOffset.left - hOffset.left) + 'px;top:' + (cOffset.top - hOffset.top) + 'px');
+					}, 300);
+				} else {
+					if (me._mode) {
+						spoke = 24;
+						value = me._sDialog.sDate.format('H');
+					} else {
+						spoke = 12;
+						value = me._sDialog.sDate.format('h');
+					}
+				}
+				var rotationClass = me._calcRotation(spoke, parseInt(value, 10));
+				if (rotationClass) {
+					needle.classList.add(rotationClass);
+				}
+				// toggle the view type
+				mdDateTimePicker.dialog.view = !mdDateTimePicker.dialog.view;
+			}
+		}, {
+			key: '_switchToDateView',
+			value: function _switchToDateView(el, me) {
+				el.setAttribute('disabled', '');
+				var viewHolder = me._sDialog.viewHolder,
+				    years = me._sDialog.years,
+				    title = me._sDialog.title,
+				    subtitle = me._sDialog.subtitle,
+				    currentYear = document.getElementById('mddtp-date__currentYear');
+
+				if (mdDateTimePicker.dialog.view) {
+					viewHolder.classList.add('zoomOut');
+					years.classList.remove('mddtp-picker__years--invisible');
+					years.classList.add('zoomIn');
+					// scroll into the view
+					currentYear.scrollIntoViewIfNeeded();
+				} else {
+					years.classList.add('zoomOut');
+					viewHolder.classList.remove('zoomOut');
+					viewHolder.classList.add('zoomIn');
+					setTimeout(function () {
+						years.classList.remove('zoomIn', 'zoomOut');
+						years.classList.add('mddtp-picker__years--invisible');
+						viewHolder.classList.remove('zoomIn');
+					}, 300);
+				}
+				title.classList.toggle('mddtp-picker__color--active');
+				subtitle.classList.toggle('mddtp-picker__color--active');
+				mdDateTimePicker.dialog.view = !mdDateTimePicker.dialog.view;
+				setTimeout(function () {
+					el.removeAttribute('disabled');
+				}, 300);
+			}
+		}, {
+			key: '_addClockEvent',
+			value: function _addClockEvent() {
+				var me = this,
+				    hourView = this._sDialog.hourView,
+				    minuteView = this._sDialog.minuteView,
+				    sClass = 'mddtp-picker__cell--selected';
+
+				hourView.onclick = function (e) {
+					var sHour = 'mddtp-hour__selected',
+					    selectedHour = document.getElementById(sHour),
+					    setHour = 0;
+
+					if (e.target && e.target.nodeName == 'SPAN') {
+						// clear the previously selected hour
+						selectedHour.id = '';
+						selectedHour.classList.remove(sClass);
+						// select the new hour
+						e.target.parentNode.classList.add(sClass);
+						e.target.parentNode.id = sHour;
+						// set the sDate according to 24 or 12 hour mode
+						if (me._mode) {
+							setHour = e.target.textContent;
+						} else {
+							if (me._sDialog.sDate.format('A') === 'AM') {
+								setHour = e.target.textContent;
+							} else {
+								setHour = parseInt(e.target.textContent, 10) + 12;
+							}
+						}
+						me._sDialog.sDate.hour(setHour);
+						// set the display hour
+						me._sDialog.hour.textContent = e.target.textContent;
+						// switch the view
+						me._switchToTimeView(me);
+					}
+				};
+				minuteView.onclick = function (e) {
+					var sMinute = 'mddtp-minute__selected',
+					    selectedMinute = document.getElementById(sMinute),
+					    setMinute = 0;
+
+					if (e.target && e.target.nodeName == 'SPAN') {
+						// clear the previously selected hour
+						if (selectedMinute) {
+							selectedMinute.id = '';
+							selectedMinute.classList.remove(sClass);
+						}
+						// select the new hour
+						e.target.parentNode.classList.add(sClass);
+						e.target.parentNode.id = sMinute;
+						// set the sDate minute
+						setMinute = e.target.textContent;
+						me._sDialog.sDate.minute(setMinute);
+						// set the display minute
+						me._sDialog.minute.textContent = setMinute;
+						// switch the view
+						me._switchToTimeView(me);
+					}
+				};
+			}
+		}, {
+			key: '_addCellClickEvent',
+			value: function _addCellClickEvent(el) {
+				var me = this;
+				el.onclick = function (e) {
+					if (e.target && e.target.nodeName == 'SPAN' && e.target.classList.contains('mddtp-picker__cell')) {
+						var picker = me._sDialog.picker,
+						    day = e.target.textContent,
+						    currentDate = me._sDialog.tDate.date(day),
+						    sId = 'mddtp-date__selected',
+						    sClass = 'mddtp-picker__cell--selected',
+						    selected = document.getElementById(sId),
+						    subtitle = me._sDialog.subtitle,
+						    titleDay = me._sDialog.titleDay,
+						    titleMonth = me._sDialog.titleMonth;
+
+						if (selected) {
+							selected.classList.remove(sClass);
+							selected.id = '';
+						}
+						e.target.classList.add(sClass);
+						e.target.id = sId;
+
+						// update temp date object with the date selected
+						me._sDialog.sDate = currentDate.clone();
+
+						me._fillText(subtitle, currentDate.year());
+						me._fillText(titleDay, currentDate.format('ddd, '));
+						me._fillText(titleMonth, currentDate.format('MMM D'));
+					}
+				};
+			}
+		}, {
+			key: '_toMoveMonth',
+			value: function _toMoveMonth() {
+				var m = this._sDialog.tDate,
+				    left = this._sDialog.left,
+				    right = this._sDialog.right,
+				    past = this._past,
+				    future = this._future;
+
+				left.removeAttribute('disabled');
+				right.removeAttribute('disabled');
+				left.classList.remove('mddtp-button--disabled');
+				right.classList.remove('mddtp-button--disabled');
+				if (m.isSame(past, 'month')) {
+					left.setAttribute('disabled', '');
+					left.classList.add('mddtp-button--disabled');
+				}
+				if (m.isSame(future, 'month')) {
+					right.setAttribute('disabled', '');
+					right.classList.add('mddtp-button--disabled');
+				}
+			}
+		}, {
+			key: '_changeMonth',
+			value: function _changeMonth() {
+				var me = this,
+				    left = this._sDialog.left,
+				    right = this._sDialog.right,
+				    mLeftClass = 'mddtp-picker__view--left',
+				    mRightClass = 'mddtp-picker__view--right',
+				    pause = 'mddtp-picker__view--pause';
+
+				left.onclick = function () {
+					moveStep(mRightClass, me._sDialog.previous);
+				};
+
+				right.onclick = function () {
+					moveStep(mLeftClass, me._sDialog.next);
+				};
+
+				function moveStep(aClass, to) {
+					/**
+     * [stepBack to know if the to step is going back or not]
+     *
+     * @type {Boolean}
+     */
+					var stepBack = !1,
+					    next = me._sDialog.next,
+					    current = me._sDialog.current,
+					    previous = me._sDialog.previous;
+
+					left.setAttribute('disabled', '');
+					right.setAttribute('disabled', '');
+					current.classList.add(aClass);
+					previous.classList.add(aClass);
+					next.classList.add(aClass);
+					var clone = to.cloneNode(!0),
+					    del = void 0;
+
+					if (to === next) {
+						del = previous;
+						current.parentNode.appendChild(clone);
+						next.id = current.id;
+						current.id = previous.id;
+						previous = current;
+						current = next;
+						next = clone;
+					} else {
+						stepBack = !0;
+						del = next;
+						previous.id = current.id;
+						current.id = next.id;
+						next = current;
+						current = previous;
+					}
+					setTimeout(function () {
+						if (to === previous) {
+							current.parentNode.insertBefore(clone, current);
+							previous = clone;
+						}
+						// update real values to match these values
+						me._sDialog.next = next;
+						me._sDialog.current = current;
+						me._sDialog.previous = previous;
+						current.classList.add(pause);
+						next.classList.add(pause);
+						previous.classList.add(pause);
+						current.classList.remove(aClass);
+						next.classList.remove(aClass);
+						previous.classList.remove(aClass);
+						del.parentNode.removeChild(del);
+					}, 300);
+					// REVIEW replace below code with requestAnimationFrame
+					setTimeout(function () {
+						current.classList.remove(pause);
+						next.classList.remove(pause);
+						previous.classList.remove(pause);
+						if (stepBack) {
+							me._sDialog.tDate = me._getMonth(me._sDialog.tDate, -1);
+						} else {
+							me._sDialog.tDate = me._getMonth(me._sDialog.tDate, 1);
+						}
+						me._initViewHolder();
+					}, 350);
+					setTimeout(function () {
+						if (!left.classList.contains('mddtp-button--disabled')) {
+							left.removeAttribute('disabled');
+						}
+						if (!right.classList.contains('mddtp-button--disabled')) {
+							right.removeAttribute('disabled');
+						}
+					}, 400);
+				}
+			}
+		}, {
+			key: '_changeYear',
+			value: function _changeYear(el) {
+				var me = this;
+				el.onclick = function (e) {
+					if (e.target && e.target.nodeName == 'LI') {
+						var selected = document.getElementById('mddtp-date__currentYear');
+						// clear previous selected
+						selected.id = '';
+						selected.classList.remove('mddtp-picker__li--current');
+						// add the properties to the newer one
+						e.target.id = 'mddtp-date__currentYear';
+						e.target.classList.add('mddtp-picker__li--current');
+						// switch view
+						me._switchToDateView(el, me);
+						// set the tdate to it
+						me._sDialog.tDate.year(parseInt(e.target.textContent, 10));
+						// update the dialog
+						me._initViewHolder();
+					}
+				};
+			}
+		}, {
+			key: '_changeM',
+			value: function _changeM() {
+				var me = this,
+				    AM = this._sDialog.AM,
+				    PM = this._sDialog.PM;
+
+				AM.onclick = function (e) {
+					var m = me._sDialog.sDate.format('A');
+					if (m === 'PM') {
+						me._sDialog.sDate.subtract(12, 'h');
+						AM.classList.toggle('mddtp-picker__color--active');
+						PM.classList.toggle('mddtp-picker__color--active');
+					}
+				};
+				PM.onclick = function (e) {
+					var m = me._sDialog.sDate.format('A');
+					if (m === 'AM') {
+						me._sDialog.sDate.add(12, 'h');
+						AM.classList.toggle('mddtp-picker__color--active');
+						PM.classList.toggle('mddtp-picker__color--active');
+					}
+				};
+			}
+		}, {
+			key: '_dragDial',
+			value: function _dragDial() {
+				var me = this,
+				    needle = this._sDialog.needle,
+				    circle = this._sDialog.circle,
+				    fakeNeedle = this._sDialog.fakeNeedle,
+				    circularHolder = this._sDialog.circularHolder,
+				    minute = this._sDialog.minute,
+				    quick = 'mddtp-picker__selection--quick',
+				    selection = 'mddtp-picker__selection',
+				    selected = 'mddtp-picker__cell--selected',
+				    rotate = 'mddtp-picker__cell--rotate-',
+				    hOffset = circularHolder.getBoundingClientRect(),
+				    divides = void 0,
+				    fakeNeedleDraggabilly = new Draggabilly(fakeNeedle, {
+					containment: !0
+				});
+
+				fakeNeedleDraggabilly.on('pointerDown', function () {
+					hOffset = circularHolder.getBoundingClientRect();
+				});
+				fakeNeedleDraggabilly.on('dragMove', function (e) {
+					var xPos = e.clientX - hOffset.left - hOffset.width / 2,
+					    yPos = e.clientY - hOffset.top - hOffset.height / 2,
+					    slope = Math.atan2(-yPos, xPos);
+
+					needle.className = '';
+					if (slope < 0) {
+						slope += 2 * Math.PI;
+					}
+					slope *= 180 / Math.PI;
+					slope = 360 - slope;
+					if (slope > 270) {
+						slope -= 360;
+					}
+					divides = parseInt(slope / 6);
+					var same = Math.abs(6 * divides - slope),
+					    upper = Math.abs(6 * (divides + 1) - slope);
+
+					if (upper < same) {
+						divides++;
+					}
+					divides += 15;
+					needle.classList.add(selection);
+					needle.classList.add(quick);
+					needle.classList.add(rotate + divides * 2);
+				});
+				fakeNeedleDraggabilly.on('dragEnd', function () {
+					var minuteViewChildren = me._sDialog.minuteView.getElementsByTagName('div'),
+					    sMinute = 'mddtp-minute__selected',
+					    selectedMinute = document.getElementById(sMinute),
+					    cOffset = circle.getBoundingClientRect();
+
+					fakeNeedle.setAttribute('style', 'left:' + (cOffset.left - hOffset.left) + 'px;top:' + (cOffset.top - hOffset.top) + 'px');
+					needle.classList.remove(quick);
+					var select = divides;
+					if (select === 1) {
+						select = 60;
+					}
+					select = me._nearestDivisor(select, 5);
+					// normalize 60 => 0
+					if (divides === 60) {
+						divides = 0;
+					}
+					// remove previously selected value
+					if (selectedMinute) {
+						selectedMinute.id = '';
+						selectedMinute.classList.remove(selected);
+					}
+					// add the new selected
+					if (select > 0) {
+						select /= 5;
+						select--;
+						minuteViewChildren[select].id = sMinute;
+						minuteViewChildren[select].classList.add(selected);
+					}
+					minute.textContent = me._numWithZero(divides);
+					me._sDialog.sDate.minutes(divides);
+				});
+			}
+		}, {
+			key: '_attachEventHandlers',
+			value: function _attachEventHandlers() {
+				var me = this,
+				    ok = this._sDialog.ok,
+				    cancel = this._sDialog.cancel,
+				    onCancel = new CustomEvent('onCancel'),
+				    onOk = new CustomEvent('onOk');
+				// create cutom events to dispatch
+
+				cancel.onclick = function () {
+					me.toggle();
+					if (me._trigger) {
+						me._trigger.dispatchEvent(onCancel);
+					}
+				};
+				ok.onclick = function () {
+					me._init = me._sDialog.sDate;
+					me.toggle();
+					if (me._trigger) {
+						me._trigger.dispatchEvent(onOk);
+					}
+				};
+			}
+		}, {
+			key: '_getMonth',
+			value: function _getMonth(moment, count) {
+				var m = void 0;
+				m = moment.clone();
+				if (count > 0) {
+					return m.add(Math.abs(count), 'M');
+				} else {
+					return m.subtract(Math.abs(count), 'M');
+				}
+			}
+		}, {
+			key: '_nearestDivisor',
+			value: function _nearestDivisor(number, divided) {
+				if (number % divided === 0) {
+					return number;
+				} else if ((number - 1) % divided === 0) {
+					return number - 1;
+				} else if ((number + 1) % divided === 0) {
+					return number + 1;
+				}
+				return -1;
+			}
+		}, {
+			key: '_numWithZero',
+			value: function _numWithZero(n) {
+				return n > 9 ? '' + n : '0' + n;
+			}
+		}, {
+			key: '_fillText',
+			value: function _fillText(el, text) {
+				if (el.firstChild) {
+					el.firstChild.nodeValue = text;
+				} else {
+					el.appendChild(document.createTextNode(text));
+				}
+			}
+		}, {
+			key: '_addId',
+			value: function _addId(el, id) {
+				el.id = 'mddtp-' + this._type + '__' + id;
+			}
+		}, {
+			key: '_addClass',
+			value: function _addClass(el, aClass, more) {
+				el.classList.add('mddtp-picker__' + aClass);
+				var i = 0;
+				if (more) {
+					i = more.length;
+					more.reverse();
+				}
+				while (i--) {
+					el.classList.add(more[i]);
+				}
+			}
+		}, {
+			key: '_addView',
+			value: function _addView(view) {
+				var month = document.createElement('div'),
+				    grid = document.createElement('div'),
+				    th = document.createElement('div'),
+				    tr = document.createElement('div'),
+				    weekDays = ['S', 'F', 'T', 'W', 'T', 'M', 'S'],
+				    week = 7;
+
+				while (week--) {
+					var span = document.createElement('span');
+					span.textContent = weekDays[week];
+					th.appendChild(span);
+				}
+				// add properties to them
+				this._addClass(month, 'month');
+				this._addClass(grid, 'grid');
+				this._addClass(th, 'th');
+				this._addClass(tr, 'tr');
+				// add them to the view
+				view.appendChild(month);
+				view.appendChild(grid);
+				grid.appendChild(th);
+				grid.appendChild(tr);
+			}
+		}, {
+			key: '_calcRotation',
+			value: function _calcRotation(spoke, value) {
+				var start = spoke / 12 * 3;
+				// set clocks top and right side value
+				if (spoke === 12) {
+					value *= 10;
+				} else if (spoke === 24) {
+					value *= 5;
+				} else {
+					value *= 2;
+				}
+				// special case for 00 => 60
+				if (spoke === 60 && value === 0) {
+					value = 120;
+				}
+				return 'mddtp-picker__cell--rotate-' + value;
+			}
+		}, {
+			key: 'time',
+			get: function get() {
+				return this._init;
+			},
+			set: function set(m) {
+				if (m) {
+					this._init = m;
+				}
+			}
+		}, {
+			key: 'trigger',
+			get: function get() {
+				return this._trigger;
+			},
+			set: function set(el) {
+				if (el) {
+					this._trigger = el;
+				}
+			}
+		}], [{
+			key: 'dialog',
+			get: function get() {
+				return _dialog;
+			}
+		}]);
+
+		return mdDateTimePicker;
+	}();
+
+	exports.default = mdDateTimePicker;
+});