react-datetime - npm Package Compare versions

Comparing version 2.8.4 to 2.8.5

CHANGELOG.md

 Changelog
 =========
+## 2.8.5
+* Fix bug where `closeOnSelect` was not closing when it was set to `true`
+* Fix bug where component would not immediately re-render when updating either `utc` or `locale` prop
+
 ## 2.8.4
@@ -4,0 +8,0 @@ * Fix bug where `closeOnSelect=true` would cause component to close on state change

DateTime.js

@@ -132,3 +132,3 @@ 'use strict';
 			},
-			locale = this.localMoment( props.date ).localeData()
+			locale = this.localMoment( props.date, null, props ).localeData()
 		;
@@ -157,19 +157,54 @@
 		var formats = this.getFormats( nextProps ),
-			update = {}
+			updatedState = {}
 		;
 
 		if ( nextProps.value !== this.props.value ||
-            formats.datetime !== this.getFormats( this.props ).datetime ) {
-            update = this.getStateFromProps( nextProps );
+			formats.datetime !== this.getFormats( this.props ).datetime ) {
+			updatedState = this.getStateFromProps( nextProps );
 		}
 
-		if ( update.open === undefined ) {
-			update.open = this.state.open;
+		// What is this for? Keeping for now, will remove later
+		if ( updatedState.open === undefined ) {
+			updatedState.open = this.state.open;
 		}
-        
+
+		if ( this.props.closeOnSelect === false ) {
+			updatedState.open = true;
+		}
+
 		if ( nextProps.viewMode !== this.props.viewMode ) {
-			update.currentView = nextProps.viewMode;
+			updatedState.currentView = nextProps.viewMode;
 		}
 
-		this.setState( update );
+		if ( nextProps.locale !== this.props.locale ) {
+			if ( this.state.viewDate ) {
+				var updatedViewDate = this.state.viewDate.clone().locale( nextProps.locale );
+				updatedState.viewDate = updatedViewDate;
+			}
+			if ( this.state.selectedDate ) {
+				var updatedSelectedDate = this.state.selectedDate.clone().locale( nextProps.locale );
+				updatedState.selectedDate = updatedSelectedDate;
+				updatedState.inputValue = updatedSelectedDate.format( formats.datetime );
+			}
+		}
+
+		if ( nextProps.utc !== this.props.utc ) {
+			if ( nextProps.utc ) {
+				if ( this.state.viewDate )
+					updatedState.viewDate = this.state.viewDate.clone().utc();
+				if ( this.state.selectedDate ) {
+					updatedState.selectedDate = this.state.selectedDate.clone().utc();
+					updatedState.inputValue = updatedState.selectedDate.format( formats.datetime );
+				}
+			} else {
+				if ( this.state.viewDate )
+					updatedState.viewDate = this.state.viewDate.clone().local();
+				if ( this.state.selectedDate ) {
+					updatedState.selectedDate = this.state.selectedDate.clone().local();
+					updatedState.inputValue = updatedState.selectedDate.format(formats.datetime);
+				}
+			}
+		}
+
+		this.setState( updatedState );
 	},
@@ -342,7 +377,8 @@
 
-	localMoment: function( date, format ) {
-		var momentFn = this.props.utc ? moment.utc : moment;
-		var m = momentFn( date, format, this.props.strictParsing );
-		if ( this.props.locale )
-			m.locale( this.props.locale );
+	localMoment: function( date, format, props ) {
+		props = props || this.props;
+		var momentFn = props.utc ? moment.utc : moment;
+		var m = momentFn( date, format, props.strictParsing );
+		if ( props.locale )
+			m.locale( props.locale );
 		return m;
@@ -349,0 +385,0 @@ },

dist/react-datetime.js

 /*
-react-datetime v2.8.4
-https://github.com/arqex/react-datetime
-MIT: https://github.com/arqex/react-datetime/raw/master/LICENSE
+react-datetime v2.8.5
+https://github.com/YouCanBookMe/react-datetime
+MIT: https://github.com/YouCanBookMe/react-datetime/raw/master/LICENSE
 */
@@ -62,4 +62,451 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-	eval("'use strict';\n\nvar assign = __webpack_require__(1),\n\tmoment = __webpack_require__(2),\n\tReact = __webpack_require__(3),\n\tDaysView = __webpack_require__(4),\n\tMonthsView = __webpack_require__(5),\n\tYearsView = __webpack_require__(6),\n\tTimeView = __webpack_require__(7)\n;\n\nvar TYPES = React.PropTypes;\nvar Datetime = React.createClass({\n\tmixins: [\n\t\t__webpack_require__(8)\n\t],\n\tviewComponents: {\n\t\tdays: DaysView,\n\t\tmonths: MonthsView,\n\t\tyears: YearsView,\n\t\ttime: TimeView\n\t},\n\tpropTypes: {\n\t\t// value: TYPES.object | TYPES.string,\n\t\t// defaultValue: TYPES.object | TYPES.string,\n\t\tonFocus: TYPES.func,\n\t\tonBlur: TYPES.func,\n\t\tonChange: TYPES.func,\n\t\tlocale: TYPES.string,\n\t\tutc: TYPES.bool,\n\t\tinput: TYPES.bool,\n\t\t// dateFormat: TYPES.string | TYPES.bool,\n\t\t// timeFormat: TYPES.string | TYPES.bool,\n\t\tinputProps: TYPES.object,\n\t\ttimeConstraints: TYPES.object,\n\t\tviewMode: TYPES.oneOf(['years', 'months', 'days', 'time']),\n\t\tisValidDate: TYPES.func,\n\t\topen: TYPES.bool,\n\t\tstrictParsing: TYPES.bool,\n\t\tcloseOnSelect: TYPES.bool,\n\t\tcloseOnTab: TYPES.bool\n\t},\n\n\tgetDefaultProps: function() {\n\t\tvar nof = function() {};\n\t\treturn {\n\t\t\tclassName: '',\n\t\t\tdefaultValue: '',\n\t\t\tinputProps: {},\n\t\t\tinput: true,\n\t\t\tonFocus: nof,\n\t\t\tonBlur: nof,\n\t\t\tonChange: nof,\n\t\t\ttimeFormat: true,\n\t\t\ttimeConstraints: {},\n\t\t\tdateFormat: true,\n\t\t\tstrictParsing: true,\n\t\t\tcloseOnSelect: false,\n\t\t\tcloseOnTab: true,\n\t\t\tutc: false\n\t\t};\n\t},\n\n\tgetInitialState: function() {\n\t\tvar state = this.getStateFromProps( this.props );\n\n\t\tif ( state.open === undefined )\n\t\t\tstate.open = !this.props.input;\n\n\t\tstate.currentView = this.props.dateFormat ? (this.props.viewMode || state.updateOn || 'days') : 'time';\n\n\t\treturn state;\n\t},\n\n\tgetStateFromProps: function( props ) {\n\t\tvar formats = this.getFormats( props ),\n\t\t\tdate = props.value || props.defaultValue,\n\t\t\tselectedDate, viewDate, updateOn, inputValue\n\t\t;\n\n\t\tif ( date && typeof date === 'string' )\n\t\t\tselectedDate = this.localMoment( date, formats.datetime );\n\t\telse if ( date )\n\t\t\tselectedDate = this.localMoment( date );\n\n\t\tif ( selectedDate && !selectedDate.isValid() )\n\t\t\tselectedDate = null;\n\n\t\tviewDate = selectedDate ?\n\t\t\tselectedDate.clone().startOf('month') :\n\t\t\tthis.localMoment().startOf('month')\n\t\t;\n\n\t\tupdateOn = this.getUpdateOn(formats);\n\n\t\tif ( selectedDate )\n\t\t\tinputValue = selectedDate.format(formats.datetime);\n\t\telse if ( date.isValid && !date.isValid() )\n\t\t\tinputValue = '';\n\t\telse\n\t\t\tinputValue = date || '';\n\n\t\treturn {\n\t\t\tupdateOn: updateOn,\n\t\t\tinputFormat: formats.datetime,\n\t\t\tviewDate: viewDate,\n\t\t\tselectedDate: selectedDate,\n\t\t\tinputValue: inputValue,\n\t\t\topen: props.open\n\t\t};\n\t},\n\n\tgetUpdateOn: function( formats ) {\n\t\tif ( formats.date.match(/[lLD]/) ) {\n\t\t\treturn 'days';\n\t\t}\n\t\telse if ( formats.date.indexOf('M') !== -1 ) {\n\t\t\treturn 'months';\n\t\t}\n\t\telse if ( formats.date.indexOf('Y') !== -1 ) {\n\t\t\treturn 'years';\n\t\t}\n\n\t\treturn 'days';\n\t},\n\n\tgetFormats: function( props ) {\n\t\tvar formats = {\n\t\t\t\tdate: props.dateFormat || '',\n\t\t\t\ttime: props.timeFormat || ''\n\t\t\t},\n\t\t\tlocale = this.localMoment( props.date ).localeData()\n\t\t;\n\n\t\tif ( formats.date === true ) {\n\t\t\tformats.date = locale.longDateFormat('L');\n\t\t}\n\t\telse if ( this.getUpdateOn(formats) !== 'days' ) {\n\t\t\tformats.time = '';\n\t\t}\n\n\t\tif ( formats.time === true ) {\n\t\t\tformats.time = locale.longDateFormat('LT');\n\t\t}\n\n\t\tformats.datetime = formats.date && formats.time ?\n\t\t\tformats.date + ' ' + formats.time :\n\t\t\tformats.date || formats.time\n\t\t;\n\n\t\treturn formats;\n\t},\n\n\tcomponentWillReceiveProps: function( nextProps ) {\n\t\tvar formats = this.getFormats( nextProps ),\n\t\t\tupdate = {}\n\t\t;\n\n\t\tif ( nextProps.value !== this.props.value ||\n            formats.datetime !== this.getFormats( this.props ).datetime ) {\n            update = this.getStateFromProps( nextProps );\n\t\t}\n\n\t\tif ( update.open === undefined ) {\n\t\t\tupdate.open = this.state.open;\n\t\t}\n        \n\t\tif ( nextProps.viewMode !== this.props.viewMode ) {\n\t\t\tupdate.currentView = nextProps.viewMode;\n\t\t}\n\n\t\tthis.setState( update );\n\t},\n\n\tonInputChange: function( e ) {\n\t\tvar value = e.target === null ? e : e.target.value,\n\t\t\tlocalMoment = this.localMoment( value, this.state.inputFormat ),\n\t\t\tupdate = { inputValue: value }\n\t\t;\n\n\t\tif ( localMoment.isValid() && !this.props.value ) {\n\t\t\tupdate.selectedDate = localMoment;\n\t\t\tupdate.viewDate = localMoment.clone().startOf('month');\n\t\t}\n\t\telse {\n\t\t\tupdate.selectedDate = null;\n\t\t}\n\n\t\treturn this.setState( update, function() {\n\t\t\treturn this.props.onChange( localMoment.isValid() ? localMoment : this.state.inputValue );\n\t\t});\n\t},\n\n\tonInputKey: function( e ) {\n\t\tif ( e.which === 9 && this.props.closeOnTab ) {\n\t\t\tthis.closeCalendar();\n\t\t}\n\t},\n\n\tshowView: function( view ) {\n\t\tvar me = this;\n\t\treturn function() {\n\t\t\tme.setState({ currentView: view });\n\t\t};\n\t},\n\n\tsetDate: function( type ) {\n\t\tvar me = this,\n\t\t\tnextViews = {\n\t\t\t\tmonth: 'days',\n\t\t\t\tyear: 'months'\n\t\t\t}\n\t\t;\n\t\treturn function( e ) {\n\t\t\tme.setState({\n\t\t\t\tviewDate: me.state.viewDate.clone()[ type ]( parseInt(e.target.getAttribute('data-value'), 10) ).startOf( type ),\n\t\t\t\tcurrentView: nextViews[ type ]\n\t\t\t});\n\t\t};\n\t},\n\n\taddTime: function( amount, type, toSelected ) {\n\t\treturn this.updateTime( 'add', amount, type, toSelected );\n\t},\n\n\tsubtractTime: function( amount, type, toSelected ) {\n\t\treturn this.updateTime( 'subtract', amount, type, toSelected );\n\t},\n\n\tupdateTime: function( op, amount, type, toSelected ) {\n\t\tvar me = this;\n\n\t\treturn function() {\n\t\t\tvar update = {},\n\t\t\t\tdate = toSelected ? 'selectedDate' : 'viewDate'\n\t\t\t;\n\n\t\t\tupdate[ date ] = me.state[ date ].clone()[ op ]( amount, type );\n\n\t\t\tme.setState( update );\n\t\t};\n\t},\n\n\tallowedSetTime: ['hours', 'minutes', 'seconds', 'milliseconds'],\n\tsetTime: function( type, value ) {\n\t\tvar index = this.allowedSetTime.indexOf( type ) + 1,\n\t\t\tstate = this.state,\n\t\t\tdate = (state.selectedDate || state.viewDate).clone(),\n\t\t\tnextType\n\t\t;\n\n\t\t// It is needed to set all the time properties\n\t\t// to not to reset the time\n\t\tdate[ type ]( value );\n\t\tfor (; index < this.allowedSetTime.length; index++) {\n\t\t\tnextType = this.allowedSetTime[index];\n\t\t\tdate[ nextType ]( date[nextType]() );\n\t\t}\n\n\t\tif ( !this.props.value ) {\n\t\t\tthis.setState({\n\t\t\t\tselectedDate: date,\n\t\t\t\tinputValue: date.format( state.inputFormat )\n\t\t\t});\n\t\t}\n\t\tthis.props.onChange( date );\n\t},\n\n\tupdateSelectedDate: function( e, close ) {\n\t\tvar target = e.target,\n\t\t\tmodifier = 0,\n\t\t\tviewDate = this.state.viewDate,\n\t\t\tcurrentDate = this.state.selectedDate || viewDate,\n\t\t\tdate\n    ;\n\n\t\tif (target.className.indexOf('rdtDay') !== -1) {\n\t\t\tif (target.className.indexOf('rdtNew') !== -1)\n\t\t\t\tmodifier = 1;\n\t\t\telse if (target.className.indexOf('rdtOld') !== -1)\n\t\t\t\tmodifier = -1;\n\n\t\t\tdate = viewDate.clone()\n\t\t\t\t.month( viewDate.month() + modifier )\n\t\t\t\t.date( parseInt( target.getAttribute('data-value'), 10 ) );\n\t\t} else if (target.className.indexOf('rdtMonth') !== -1) {\n\t\t\tdate = viewDate.clone()\n\t\t\t\t.month( parseInt( target.getAttribute('data-value'), 10 ) )\n\t\t\t\t.date( currentDate.date() );\n\t\t} else if (target.className.indexOf('rdtYear') !== -1) {\n\t\t\tdate = viewDate.clone()\n\t\t\t\t.month( currentDate.month() )\n\t\t\t\t.date( currentDate.date() )\n\t\t\t\t.year( parseInt( target.getAttribute('data-value'), 10 ) );\n\t\t}\n\n\t\tdate.hours( currentDate.hours() )\n\t\t\t.minutes( currentDate.minutes() )\n\t\t\t.seconds( currentDate.seconds() )\n\t\t\t.milliseconds( currentDate.milliseconds() );\n\n\t\tif ( !this.props.value ) {\n\t\t\tthis.setState({\n\t\t\t\tselectedDate: date,\n\t\t\t\tviewDate: date.clone().startOf('month'),\n\t\t\t\tinputValue: date.format( this.state.inputFormat ),\n\t\t\t\topen: !(this.props.closeOnSelect && close )\n\t\t\t});\n\t\t} else {\n\t\t\tif (this.props.closeOnSelect && close) {\n\t\t\t\tthis.closeCalendar();\n\t\t\t}\n\t\t}\n\n\t\tthis.props.onChange( date );\n\t},\n\n\topenCalendar: function() {\n\t\tif (!this.state.open) {\n\t\t\tthis.setState({ open: true }, function() {\n\t\t\t\tthis.props.onFocus();\n\t\t\t});\n\t\t}\n\t},\n\n\tcloseCalendar: function() {\n\t\tthis.setState({ open: false }, function () {\n\t\t\tthis.props.onBlur( this.state.selectedDate || this.state.inputValue );\n\t\t});\n\t},\n\n\thandleClickOutside: function() {\n\t\tif ( this.props.input && this.state.open && !this.props.open ) {\n\t\t\tthis.setState({ open: false }, function() {\n\t\t\t\tthis.props.onBlur( this.state.selectedDate || this.state.inputValue );\n\t\t\t});\n\t\t}\n\t},\n\n\tlocalMoment: function( date, format ) {\n\t\tvar momentFn = this.props.utc ? moment.utc : moment;\n\t\tvar m = momentFn( date, format, this.props.strictParsing );\n\t\tif ( this.props.locale )\n\t\t\tm.locale( this.props.locale );\n\t\treturn m;\n\t},\n\n\tcomponentProps: {\n\t\tfromProps: ['value', 'isValidDate', 'renderDay', 'renderMonth', 'renderYear', 'timeConstraints'],\n\t\tfromState: ['viewDate', 'selectedDate', 'updateOn'],\n\t\tfromThis: ['setDate', 'setTime', 'showView', 'addTime', 'subtractTime', 'updateSelectedDate', 'localMoment']\n\t},\n\n\tgetComponentProps: function() {\n\t\tvar me = this,\n\t\t\tformats = this.getFormats( this.props ),\n\t\t\tprops = {dateFormat: formats.date, timeFormat: formats.time}\n\t\t;\n\n\t\tthis.componentProps.fromProps.forEach( function( name ) {\n\t\t\tprops[ name ] = me.props[ name ];\n\t\t});\n\t\tthis.componentProps.fromState.forEach( function( name ) {\n\t\t\tprops[ name ] = me.state[ name ];\n\t\t});\n\t\tthis.componentProps.fromThis.forEach( function( name ) {\n\t\t\tprops[ name ] = me[ name ];\n\t\t});\n\n\t\treturn props;\n\t},\n\n\trender: function() {\n\t\tvar Component = this.viewComponents[ this.state.currentView ],\n\t\t\tDOM = React.DOM,\n\t\t\tclassName = 'rdt' + (this.props.className ?\n                  ( Array.isArray( this.props.className ) ?\n                  ' ' + this.props.className.join( ' ' ) : ' ' + this.props.className) : ''),\n\t\t\tchildren = []\n\t\t;\n\n\t\tif ( this.props.input ) {\n\t\t\tchildren = [ DOM.input( assign({\n\t\t\t\tkey: 'i',\n\t\t\t\ttype: 'text',\n\t\t\t\tclassName: 'form-control',\n\t\t\t\tonFocus: this.openCalendar,\n\t\t\t\tonChange: this.onInputChange,\n\t\t\t\tonKeyDown: this.onInputKey,\n\t\t\t\tvalue: this.state.inputValue\n\t\t\t}, this.props.inputProps ))];\n\t\t} else {\n\t\t\tclassName += ' rdtStatic';\n\t\t}\n\n\t\tif ( this.state.open )\n\t\t\tclassName += ' rdtOpen';\n\n\t\treturn DOM.div({className: className}, children.concat(\n\t\t\tDOM.div(\n\t\t\t\t{ key: 'dt', className: 'rdtPicker' },\n\t\t\t\tReact.createElement( Component, this.getComponentProps())\n\t\t\t)\n\t\t));\n\t}\n});\n\n// Make moment accessible through the Datetime class\nDatetime.moment = moment;\n\nmodule.exports = Datetime;\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./Datetime.js\n// module id = 0\n// module chunks = 0\n//# sourceURL=webpack:///./Datetime.js?");
+	'use strict';
 
+	var assign = __webpack_require__(1),
+		moment = __webpack_require__(2),
+		React = __webpack_require__(3),
+		DaysView = __webpack_require__(4),
+		MonthsView = __webpack_require__(5),
+		YearsView = __webpack_require__(6),
+		TimeView = __webpack_require__(7)
+	;
+
+	var TYPES = React.PropTypes;
+	var Datetime = React.createClass({
+		mixins: [
+			__webpack_require__(8)
+		],
+		viewComponents: {
+			days: DaysView,
+			months: MonthsView,
+			years: YearsView,
+			time: TimeView
+		},
+		propTypes: {
+			// value: TYPES.object | TYPES.string,
+			// defaultValue: TYPES.object | TYPES.string,
+			onFocus: TYPES.func,
+			onBlur: TYPES.func,
+			onChange: TYPES.func,
+			locale: TYPES.string,
+			utc: TYPES.bool,
+			input: TYPES.bool,
+			// dateFormat: TYPES.string | TYPES.bool,
+			// timeFormat: TYPES.string | TYPES.bool,
+			inputProps: TYPES.object,
+			timeConstraints: TYPES.object,
+			viewMode: TYPES.oneOf(['years', 'months', 'days', 'time']),
+			isValidDate: TYPES.func,
+			open: TYPES.bool,
+			strictParsing: TYPES.bool,
+			closeOnSelect: TYPES.bool,
+			closeOnTab: TYPES.bool
+		},
+
+		getDefaultProps: function() {
+			var nof = function() {};
+			return {
+				className: '',
+				defaultValue: '',
+				inputProps: {},
+				input: true,
+				onFocus: nof,
+				onBlur: nof,
+				onChange: nof,
+				timeFormat: true,
+				timeConstraints: {},
+				dateFormat: true,
+				strictParsing: true,
+				closeOnSelect: false,
+				closeOnTab: true,
+				utc: false
+			};
+		},
+
+		getInitialState: function() {
+			var state = this.getStateFromProps( this.props );
+
+			if ( state.open === undefined )
+				state.open = !this.props.input;
+
+			state.currentView = this.props.dateFormat ? (this.props.viewMode || state.updateOn || 'days') : 'time';
+
+			return state;
+		},
+
+		getStateFromProps: function( props ) {
+			var formats = this.getFormats( props ),
+				date = props.value || props.defaultValue,
+				selectedDate, viewDate, updateOn, inputValue
+			;
+
+			if ( date && typeof date === 'string' )
+				selectedDate = this.localMoment( date, formats.datetime );
+			else if ( date )
+				selectedDate = this.localMoment( date );
+
+			if ( selectedDate && !selectedDate.isValid() )
+				selectedDate = null;
+
+			viewDate = selectedDate ?
+				selectedDate.clone().startOf('month') :
+				this.localMoment().startOf('month')
+			;
+
+			updateOn = this.getUpdateOn(formats);
+
+			if ( selectedDate )
+				inputValue = selectedDate.format(formats.datetime);
+			else if ( date.isValid && !date.isValid() )
+				inputValue = '';
+			else
+				inputValue = date || '';
+
+			return {
+				updateOn: updateOn,
+				inputFormat: formats.datetime,
+				viewDate: viewDate,
+				selectedDate: selectedDate,
+				inputValue: inputValue,
+				open: props.open
+			};
+		},
+
+		getUpdateOn: function( formats ) {
+			if ( formats.date.match(/[lLD]/) ) {
+				return 'days';
+			}
+			else if ( formats.date.indexOf('M') !== -1 ) {
+				return 'months';
+			}
+			else if ( formats.date.indexOf('Y') !== -1 ) {
+				return 'years';
+			}
+
+			return 'days';
+		},
+
+		getFormats: function( props ) {
+			var formats = {
+					date: props.dateFormat || '',
+					time: props.timeFormat || ''
+				},
+				locale = this.localMoment( props.date, null, props ).localeData()
+			;
+
+			if ( formats.date === true ) {
+				formats.date = locale.longDateFormat('L');
+			}
+			else if ( this.getUpdateOn(formats) !== 'days' ) {
+				formats.time = '';
+			}
+
+			if ( formats.time === true ) {
+				formats.time = locale.longDateFormat('LT');
+			}
+
+			formats.datetime = formats.date && formats.time ?
+				formats.date + ' ' + formats.time :
+				formats.date || formats.time
+			;
+
+			return formats;
+		},
+
+		componentWillReceiveProps: function( nextProps ) {
+			var formats = this.getFormats( nextProps ),
+				updatedState = {}
+			;
+
+			if ( nextProps.value !== this.props.value ||
+				formats.datetime !== this.getFormats( this.props ).datetime ) {
+				updatedState = this.getStateFromProps( nextProps );
+			}
+
+			// What is this for? Keeping for now, will remove later
+			if ( updatedState.open === undefined ) {
+				updatedState.open = this.state.open;
+			}
+
+			if ( this.props.closeOnSelect === false ) {
+				updatedState.open = true;
+			}
+
+			if ( nextProps.viewMode !== this.props.viewMode ) {
+				updatedState.currentView = nextProps.viewMode;
+			}
+
+			if ( nextProps.locale !== this.props.locale ) {
+				if ( this.state.viewDate ) {
+					var updatedViewDate = this.state.viewDate.clone().locale( nextProps.locale );
+					updatedState.viewDate = updatedViewDate;
+				}
+				if ( this.state.selectedDate ) {
+					var updatedSelectedDate = this.state.selectedDate.clone().locale( nextProps.locale );
+					updatedState.selectedDate = updatedSelectedDate;
+					updatedState.inputValue = updatedSelectedDate.format( formats.datetime );
+				}
+			}
+
+			if ( nextProps.utc !== this.props.utc ) {
+				if ( nextProps.utc ) {
+					if ( this.state.viewDate )
+						updatedState.viewDate = this.state.viewDate.clone().utc();
+					if ( this.state.selectedDate ) {
+						updatedState.selectedDate = this.state.selectedDate.clone().utc();
+						updatedState.inputValue = updatedState.selectedDate.format( formats.datetime );
+					}
+				} else {
+					if ( this.state.viewDate )
+						updatedState.viewDate = this.state.viewDate.clone().local();
+					if ( this.state.selectedDate ) {
+						updatedState.selectedDate = this.state.selectedDate.clone().local();
+						updatedState.inputValue = updatedState.selectedDate.format(formats.datetime);
+					}
+				}
+			}
+
+			this.setState( updatedState );
+		},
+
+		onInputChange: function( e ) {
+			var value = e.target === null ? e : e.target.value,
+				localMoment = this.localMoment( value, this.state.inputFormat ),
+				update = { inputValue: value }
+			;
+
+			if ( localMoment.isValid() && !this.props.value ) {
+				update.selectedDate = localMoment;
+				update.viewDate = localMoment.clone().startOf('month');
+			}
+			else {
+				update.selectedDate = null;
+			}
+
+			return this.setState( update, function() {
+				return this.props.onChange( localMoment.isValid() ? localMoment : this.state.inputValue );
+			});
+		},
+
+		onInputKey: function( e ) {
+			if ( e.which === 9 && this.props.closeOnTab ) {
+				this.closeCalendar();
+			}
+		},
+
+		showView: function( view ) {
+			var me = this;
+			return function() {
+				me.setState({ currentView: view });
+			};
+		},
+
+		setDate: function( type ) {
+			var me = this,
+				nextViews = {
+					month: 'days',
+					year: 'months'
+				}
+			;
+			return function( e ) {
+				me.setState({
+					viewDate: me.state.viewDate.clone()[ type ]( parseInt(e.target.getAttribute('data-value'), 10) ).startOf( type ),
+					currentView: nextViews[ type ]
+				});
+			};
+		},
+
+		addTime: function( amount, type, toSelected ) {
+			return this.updateTime( 'add', amount, type, toSelected );
+		},
+
+		subtractTime: function( amount, type, toSelected ) {
+			return this.updateTime( 'subtract', amount, type, toSelected );
+		},
+
+		updateTime: function( op, amount, type, toSelected ) {
+			var me = this;
+
+			return function() {
+				var update = {},
+					date = toSelected ? 'selectedDate' : 'viewDate'
+				;
+
+				update[ date ] = me.state[ date ].clone()[ op ]( amount, type );
+
+				me.setState( update );
+			};
+		},
+
+		allowedSetTime: ['hours', 'minutes', 'seconds', 'milliseconds'],
+		setTime: function( type, value ) {
+			var index = this.allowedSetTime.indexOf( type ) + 1,
+				state = this.state,
+				date = (state.selectedDate || state.viewDate).clone(),
+				nextType
+			;
+
+			// It is needed to set all the time properties
+			// to not to reset the time
+			date[ type ]( value );
+			for (; index < this.allowedSetTime.length; index++) {
+				nextType = this.allowedSetTime[index];
+				date[ nextType ]( date[nextType]() );
+			}
+
+			if ( !this.props.value ) {
+				this.setState({
+					selectedDate: date,
+					inputValue: date.format( state.inputFormat )
+				});
+			}
+			this.props.onChange( date );
+		},
+
+		updateSelectedDate: function( e, close ) {
+			var target = e.target,
+				modifier = 0,
+				viewDate = this.state.viewDate,
+				currentDate = this.state.selectedDate || viewDate,
+				date
+	    ;
+
+			if (target.className.indexOf('rdtDay') !== -1) {
+				if (target.className.indexOf('rdtNew') !== -1)
+					modifier = 1;
+				else if (target.className.indexOf('rdtOld') !== -1)
+					modifier = -1;
+
+				date = viewDate.clone()
+					.month( viewDate.month() + modifier )
+					.date( parseInt( target.getAttribute('data-value'), 10 ) );
+			} else if (target.className.indexOf('rdtMonth') !== -1) {
+				date = viewDate.clone()
+					.month( parseInt( target.getAttribute('data-value'), 10 ) )
+					.date( currentDate.date() );
+			} else if (target.className.indexOf('rdtYear') !== -1) {
+				date = viewDate.clone()
+					.month( currentDate.month() )
+					.date( currentDate.date() )
+					.year( parseInt( target.getAttribute('data-value'), 10 ) );
+			}
+
+			date.hours( currentDate.hours() )
+				.minutes( currentDate.minutes() )
+				.seconds( currentDate.seconds() )
+				.milliseconds( currentDate.milliseconds() );
+
+			if ( !this.props.value ) {
+				this.setState({
+					selectedDate: date,
+					viewDate: date.clone().startOf('month'),
+					inputValue: date.format( this.state.inputFormat ),
+					open: !(this.props.closeOnSelect && close )
+				});
+			} else {
+				if (this.props.closeOnSelect && close) {
+					this.closeCalendar();
+				}
+			}
+
+			this.props.onChange( date );
+		},
+
+		openCalendar: function() {
+			if (!this.state.open) {
+				this.setState({ open: true }, function() {
+					this.props.onFocus();
+				});
+			}
+		},
+
+		closeCalendar: function() {
+			this.setState({ open: false }, function () {
+				this.props.onBlur( this.state.selectedDate || this.state.inputValue );
+			});
+		},
+
+		handleClickOutside: function() {
+			if ( this.props.input && this.state.open && !this.props.open ) {
+				this.setState({ open: false }, function() {
+					this.props.onBlur( this.state.selectedDate || this.state.inputValue );
+				});
+			}
+		},
+
+		localMoment: function( date, format, props ) {
+			props = props || this.props;
+			var momentFn = props.utc ? moment.utc : moment;
+			var m = momentFn( date, format, props.strictParsing );
+			if ( props.locale )
+				m.locale( props.locale );
+			return m;
+		},
+
+		componentProps: {
+			fromProps: ['value', 'isValidDate', 'renderDay', 'renderMonth', 'renderYear', 'timeConstraints'],
+			fromState: ['viewDate', 'selectedDate', 'updateOn'],
+			fromThis: ['setDate', 'setTime', 'showView', 'addTime', 'subtractTime', 'updateSelectedDate', 'localMoment']
+		},
+
+		getComponentProps: function() {
+			var me = this,
+				formats = this.getFormats( this.props ),
+				props = {dateFormat: formats.date, timeFormat: formats.time}
+			;
+
+			this.componentProps.fromProps.forEach( function( name ) {
+				props[ name ] = me.props[ name ];
+			});
+			this.componentProps.fromState.forEach( function( name ) {
+				props[ name ] = me.state[ name ];
+			});
+			this.componentProps.fromThis.forEach( function( name ) {
+				props[ name ] = me[ name ];
+			});
+
+			return props;
+		},
+
+		render: function() {
+			var Component = this.viewComponents[ this.state.currentView ],
+				DOM = React.DOM,
+				className = 'rdt' + (this.props.className ?
+	                  ( Array.isArray( this.props.className ) ?
+	                  ' ' + this.props.className.join( ' ' ) : ' ' + this.props.className) : ''),
+				children = []
+			;
+
+			if ( this.props.input ) {
+				children = [ DOM.input( assign({
+					key: 'i',
+					type: 'text',
+					className: 'form-control',
+					onFocus: this.openCalendar,
+					onChange: this.onInputChange,
+					onKeyDown: this.onInputKey,
+					value: this.state.inputValue
+				}, this.props.inputProps ))];
+			} else {
+				className += ' rdtStatic';
+			}
+
+			if ( this.state.open )
+				className += ' rdtOpen';
+
+			return DOM.div({className: className}, children.concat(
+				DOM.div(
+					{ key: 'dt', className: 'rdtPicker' },
+					React.createElement( Component, this.getComponentProps())
+				)
+			));
+		}
+	});
+
+	// Make moment accessible through the Datetime class
+	Datetime.moment = moment;
+
+	module.exports = Datetime;
+
+
 /***/ },
@@ -69,4 +516,43 @@ /* 1 */
 
-	eval("'use strict';\nvar propIsEnumerable = Object.prototype.propertyIsEnumerable;\n\nfunction ToObject(val) {\n\tif (val == null) {\n\t\tthrow new TypeError('Object.assign cannot be called with null or undefined');\n\t}\n\n\treturn Object(val);\n}\n\nfunction ownEnumerableKeys(obj) {\n\tvar keys = Object.getOwnPropertyNames(obj);\n\n\tif (Object.getOwnPropertySymbols) {\n\t\tkeys = keys.concat(Object.getOwnPropertySymbols(obj));\n\t}\n\n\treturn keys.filter(function (key) {\n\t\treturn propIsEnumerable.call(obj, key);\n\t});\n}\n\nmodule.exports = Object.assign || function (target, source) {\n\tvar from;\n\tvar keys;\n\tvar to = ToObject(target);\n\n\tfor (var s = 1; s < arguments.length; s++) {\n\t\tfrom = arguments[s];\n\t\tkeys = ownEnumerableKeys(Object(from));\n\n\t\tfor (var i = 0; i < keys.length; i++) {\n\t\t\tto[keys[i]] = from[keys[i]];\n\t\t}\n\t}\n\n\treturn to;\n};\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/object-assign/index.js\n// module id = 1\n// module chunks = 0\n//# sourceURL=webpack:///./~/object-assign/index.js?");
+	'use strict';
+	var propIsEnumerable = Object.prototype.propertyIsEnumerable;
 
+	function ToObject(val) {
+		if (val == null) {
+			throw new TypeError('Object.assign cannot be called with null or undefined');
+		}
+
+		return Object(val);
+	}
+
+	function ownEnumerableKeys(obj) {
+		var keys = Object.getOwnPropertyNames(obj);
+
+		if (Object.getOwnPropertySymbols) {
+			keys = keys.concat(Object.getOwnPropertySymbols(obj));
+		}
+
+		return keys.filter(function (key) {
+			return propIsEnumerable.call(obj, key);
+		});
+	}
+
+	module.exports = Object.assign || function (target, source) {
+		var from;
+		var keys;
+		var to = ToObject(target);
+
+		for (var s = 1; s < arguments.length; s++) {
+			from = arguments[s];
+			keys = ownEnumerableKeys(Object(from));
+
+			for (var i = 0; i < keys.length; i++) {
+				to[keys[i]] = from[keys[i]];
+			}
+		}
+
+		return to;
+	};
+
+
 /***/ },
@@ -76,3 +562,3 @@ /* 2 */
 
-	eval("module.exports = __WEBPACK_EXTERNAL_MODULE_2__;\n\n//////////////////\n// WEBPACK FOOTER\n// external \"moment\"\n// module id = 2\n// module chunks = 0\n//# sourceURL=webpack:///external_%22moment%22?");
+	module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
 
@@ -83,3 +569,3 @@ /***/ },
 
-	eval("module.exports = __WEBPACK_EXTERNAL_MODULE_3__;\n\n//////////////////\n// WEBPACK FOOTER\n// external \"React\"\n// module id = 3\n// module chunks = 0\n//# sourceURL=webpack:///external_%22React%22?");
+	module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
 
@@ -90,4 +576,143 @@ /***/ },
 
-	eval("'use strict';\n\nvar React = __webpack_require__(3),\n\tmoment = __webpack_require__(2)\n;\n\nvar DOM = React.DOM;\nvar DateTimePickerDays = React.createClass({\n\trender: function() {\n\t\tvar footer = this.renderFooter(),\n\t\t\tdate = this.props.viewDate,\n\t\t\tlocale = date.localeData(),\n\t\t\ttableChildren\n\t\t;\n\n\t\ttableChildren = [\n\t\t\tDOM.thead({ key: 'th' }, [\n\t\t\t\tDOM.tr({ key: 'h' }, [\n\t\t\t\t\tDOM.th({ key: 'p', className: 'rdtPrev' }, DOM.span({ onClick: this.props.subtractTime( 1, 'months' )}, '‹' )),\n\t\t\t\t\tDOM.th({ key: 's', className: 'rdtSwitch', onClick: this.props.showView( 'months' ), colSpan: 5, 'data-value': this.props.viewDate.month() }, locale.months( date ) + ' ' + date.year() ),\n\t\t\t\t\tDOM.th({ key: 'n', className: 'rdtNext' }, DOM.span({ onClick: this.props.addTime( 1, 'months' )}, '›' ))\n\t\t\t\t]),\n\t\t\t\tDOM.tr({ key: 'd'}, this.getDaysOfWeek( locale ).map( function( day, index ) { return DOM.th({ key: day + index, className: 'dow'}, day ); }) )\n\t\t\t]),\n\t\t\tDOM.tbody({ key: 'tb' }, this.renderDays())\n\t\t];\n\n\t\tif ( footer )\n\t\t\ttableChildren.push( footer );\n\n\t\treturn DOM.div({ className: 'rdtDays' },\n\t\t\tDOM.table({}, tableChildren )\n\t\t);\n\t},\n\n\t/**\n\t * Get a list of the days of the week\n\t * depending on the current locale\n\t * @return {array} A list with the shortname of the days\n\t */\n\tgetDaysOfWeek: function( locale ) {\n\t\tvar days = locale._weekdaysMin,\n\t\t\tfirst = locale.firstDayOfWeek(),\n\t\t\tdow = [],\n\t\t\ti = 0\n\t\t;\n\n\t\tdays.forEach( function( day ) {\n\t\t\tdow[ (7 + ( i++ ) - first) % 7 ] = day;\n\t\t});\n\n\t\treturn dow;\n\t},\n\n\trenderDays: function() {\n\t\tvar date = this.props.viewDate,\n\t\t\tselected = this.props.selectedDate && this.props.selectedDate.clone(),\n\t\t\tprevMonth = date.clone().subtract( 1, 'months' ),\n\t\t\tcurrentYear = date.year(),\n\t\t\tcurrentMonth = date.month(),\n\t\t\tweeks = [],\n\t\t\tdays = [],\n\t\t\trenderer = this.props.renderDay || this.renderDay,\n\t\t\tisValid = this.props.isValidDate || this.alwaysValidDate,\n\t\t\tclasses, isDisabled, dayProps, currentDate\n\t\t;\n\n\t\t// Go to the last week of the previous month\n\t\tprevMonth.date( prevMonth.daysInMonth() ).startOf( 'week' );\n\t\tvar lastDay = prevMonth.clone().add( 42, 'd' );\n\n\t\twhile ( prevMonth.isBefore( lastDay ) ) {\n\t\t\tclasses = 'rdtDay';\n\t\t\tcurrentDate = prevMonth.clone();\n\n\t\t\tif ( ( prevMonth.year() === currentYear && prevMonth.month() < currentMonth ) || ( prevMonth.year() < currentYear ) )\n\t\t\t\tclasses += ' rdtOld';\n\t\t\telse if ( ( prevMonth.year() === currentYear && prevMonth.month() > currentMonth ) || ( prevMonth.year() > currentYear ) )\n\t\t\t\tclasses += ' rdtNew';\n\n\t\t\tif ( selected && prevMonth.isSame( selected, 'day' ) )\n\t\t\t\tclasses += ' rdtActive';\n\n\t\t\tif (prevMonth.isSame( moment(), 'day' ) )\n\t\t\t\tclasses += ' rdtToday';\n\n\t\t\tisDisabled = !isValid( currentDate, selected );\n\t\t\tif ( isDisabled )\n\t\t\t\tclasses += ' rdtDisabled';\n\n\t\t\tdayProps = {\n\t\t\t\tkey: prevMonth.format( 'M_D' ),\n\t\t\t\t'data-value': prevMonth.date(),\n\t\t\t\tclassName: classes\n\t\t\t};\n\n\t\t\tif ( !isDisabled )\n\t\t\t\tdayProps.onClick = this.updateSelectedDate;\n\n\t\t\tdays.push( renderer( dayProps, currentDate, selected ) );\n\n\t\t\tif ( days.length === 7 ) {\n\t\t\t\tweeks.push( DOM.tr({ key: prevMonth.format( 'M_D' )}, days ) );\n\t\t\t\tdays = [];\n\t\t\t}\n\n\t\t\tprevMonth.add( 1, 'd' );\n\t\t}\n\n\t\treturn weeks;\n\t},\n\n\tupdateSelectedDate: function( event ) {\n\t\tthis.props.updateSelectedDate( event, true );\n\t},\n\n\trenderDay: function( props, currentDate ) {\n\t\treturn DOM.td( props, currentDate.date() );\n\t},\n\n\trenderFooter: function() {\n\t\tif ( !this.props.timeFormat )\n\t\t\treturn '';\n\n\t\tvar date = this.props.selectedDate || this.props.viewDate;\n\n\t\treturn DOM.tfoot({ key: 'tf'},\n\t\t\tDOM.tr({},\n\t\t\t\tDOM.td({ onClick: this.props.showView( 'time' ), colSpan: 7, className: 'rdtTimeToggle' }, date.format( this.props.timeFormat ))\n\t\t\t)\n\t\t);\n\t},\n\n\talwaysValidDate: function() {\n\t\treturn 1;\n\t}\n});\n\nmodule.exports = DateTimePickerDays;\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/DaysView.js\n// module id = 4\n// module chunks = 0\n//# sourceURL=webpack:///./src/DaysView.js?");
+	'use strict';
 
+	var React = __webpack_require__(3),
+		moment = __webpack_require__(2)
+	;
+
+	var DOM = React.DOM;
+	var DateTimePickerDays = React.createClass({
+		render: function() {
+			var footer = this.renderFooter(),
+				date = this.props.viewDate,
+				locale = date.localeData(),
+				tableChildren
+			;
+
+			tableChildren = [
+				DOM.thead({ key: 'th' }, [
+					DOM.tr({ key: 'h' }, [
+						DOM.th({ key: 'p', className: 'rdtPrev' }, DOM.span({ onClick: this.props.subtractTime( 1, 'months' )}, '‹' )),
+						DOM.th({ key: 's', className: 'rdtSwitch', onClick: this.props.showView( 'months' ), colSpan: 5, 'data-value': this.props.viewDate.month() }, locale.months( date ) + ' ' + date.year() ),
+						DOM.th({ key: 'n', className: 'rdtNext' }, DOM.span({ onClick: this.props.addTime( 1, 'months' )}, '›' ))
+					]),
+					DOM.tr({ key: 'd'}, this.getDaysOfWeek( locale ).map( function( day, index ) { return DOM.th({ key: day + index, className: 'dow'}, day ); }) )
+				]),
+				DOM.tbody({ key: 'tb' }, this.renderDays())
+			];
+
+			if ( footer )
+				tableChildren.push( footer );
+
+			return DOM.div({ className: 'rdtDays' },
+				DOM.table({}, tableChildren )
+			);
+		},
+
+		/**
+		 * Get a list of the days of the week
+		 * depending on the current locale
+		 * @return {array} A list with the shortname of the days
+		 */
+		getDaysOfWeek: function( locale ) {
+			var days = locale._weekdaysMin,
+				first = locale.firstDayOfWeek(),
+				dow = [],
+				i = 0
+			;
+
+			days.forEach( function( day ) {
+				dow[ (7 + ( i++ ) - first) % 7 ] = day;
+			});
+
+			return dow;
+		},
+
+		renderDays: function() {
+			var date = this.props.viewDate,
+				selected = this.props.selectedDate && this.props.selectedDate.clone(),
+				prevMonth = date.clone().subtract( 1, 'months' ),
+				currentYear = date.year(),
+				currentMonth = date.month(),
+				weeks = [],
+				days = [],
+				renderer = this.props.renderDay || this.renderDay,
+				isValid = this.props.isValidDate || this.alwaysValidDate,
+				classes, isDisabled, dayProps, currentDate
+			;
+
+			// Go to the last week of the previous month
+			prevMonth.date( prevMonth.daysInMonth() ).startOf( 'week' );
+			var lastDay = prevMonth.clone().add( 42, 'd' );
+
+			while ( prevMonth.isBefore( lastDay ) ) {
+				classes = 'rdtDay';
+				currentDate = prevMonth.clone();
+
+				if ( ( prevMonth.year() === currentYear && prevMonth.month() < currentMonth ) || ( prevMonth.year() < currentYear ) )
+					classes += ' rdtOld';
+				else if ( ( prevMonth.year() === currentYear && prevMonth.month() > currentMonth ) || ( prevMonth.year() > currentYear ) )
+					classes += ' rdtNew';
+
+				if ( selected && prevMonth.isSame( selected, 'day' ) )
+					classes += ' rdtActive';
+
+				if (prevMonth.isSame( moment(), 'day' ) )
+					classes += ' rdtToday';
+
+				isDisabled = !isValid( currentDate, selected );
+				if ( isDisabled )
+					classes += ' rdtDisabled';
+
+				dayProps = {
+					key: prevMonth.format( 'M_D' ),
+					'data-value': prevMonth.date(),
+					className: classes
+				};
+
+				if ( !isDisabled )
+					dayProps.onClick = this.updateSelectedDate;
+
+				days.push( renderer( dayProps, currentDate, selected ) );
+
+				if ( days.length === 7 ) {
+					weeks.push( DOM.tr({ key: prevMonth.format( 'M_D' )}, days ) );
+					days = [];
+				}
+
+				prevMonth.add( 1, 'd' );
+			}
+
+			return weeks;
+		},
+
+		updateSelectedDate: function( event ) {
+			this.props.updateSelectedDate( event, true );
+		},
+
+		renderDay: function( props, currentDate ) {
+			return DOM.td( props, currentDate.date() );
+		},
+
+		renderFooter: function() {
+			if ( !this.props.timeFormat )
+				return '';
+
+			var date = this.props.selectedDate || this.props.viewDate;
+
+			return DOM.tfoot({ key: 'tf'},
+				DOM.tr({},
+					DOM.td({ onClick: this.props.showView( 'time' ), colSpan: 7, className: 'rdtTimeToggle' }, date.format( this.props.timeFormat ))
+				)
+			);
+		},
+
+		alwaysValidDate: function() {
+			return 1;
+		}
+	});
+
+	module.exports = DateTimePickerDays;
+
+
 /***/ },
@@ -97,4 +722,105 @@ /* 5 */
 
-	eval("'use strict';\n\nvar React = __webpack_require__(3);\n\nvar DOM = React.DOM;\nvar DateTimePickerMonths = React.createClass({\n\trender: function() {\n\t\treturn DOM.div({ className: 'rdtMonths' }, [\n\t\t\tDOM.table({ key: 'a' }, DOM.thead( {}, DOM.tr( {}, [\n\t\t\t\tDOM.th({ key: 'prev', className: 'rdtPrev' }, DOM.span({ onClick: this.props.subtractTime( 1, 'years' )}, '‹' )),\n\t\t\t\tDOM.th({ key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colSpan: 2, 'data-value': this.props.viewDate.year() }, this.props.viewDate.year() ),\n\t\t\t\tDOM.th({ key: 'next', className: 'rdtNext' }, DOM.span({ onClick: this.props.addTime( 1, 'years' )}, '›' ))\n\t\t\t]))),\n\t\t\tDOM.table({ key: 'months' }, DOM.tbody({ key: 'b' }, this.renderMonths()))\n\t\t]);\n\t},\n\n\trenderMonths: function() {\n\t\tvar date = this.props.selectedDate,\n\t\t\tmonth = this.props.viewDate.month(),\n\t\t\tyear = this.props.viewDate.year(),\n\t\t\trows = [],\n\t\t\ti = 0,\n\t\t\tmonths = [],\n\t\t\trenderer = this.props.renderMonth || this.renderMonth,\n\t\t\tisValid = this.props.isValidDate || this.alwaysValidDate,\n\t\t\tclasses, props, currentMonth, isDisabled, noOfDaysInMonth, daysInMonth, validDay,\n\t\t\t// Date is irrelevant because we're only interested in month\n\t\t\tirrelevantDate = 1\n\t\t;\n\n\t\twhile (i < 12) {\n\t\t\tclasses = 'rdtMonth';\n\t\t\tcurrentMonth =\n\t\t\t\tthis.props.viewDate.clone().set({ year: year, month: i, date: irrelevantDate });\n\n\t\t\tnoOfDaysInMonth = currentMonth.endOf( 'month' ).format( 'D' );\n\t\t\tdaysInMonth = Array.from({ length: noOfDaysInMonth }, function( e, i ) {\n\t\t\t\treturn i + 1;\n\t\t\t});\n\n\t\t\tvalidDay = daysInMonth.find(function( d ) {\n\t\t\t\tvar day = currentMonth.clone().set( 'date', d );\n\t\t\t\treturn isValid( day );\n\t\t\t});\n\n\t\t\tisDisabled = ( validDay === undefined );\n\n\t\t\tif ( isDisabled )\n\t\t\t\tclasses += ' rdtDisabled';\n\n\t\t\tif ( date && i === month && year === date.year() )\n\t\t\t\tclasses += ' rdtActive';\n\n\t\t\tprops = {\n\t\t\t\tkey: i,\n\t\t\t\t'data-value': i,\n\t\t\t\tclassName: classes\n\t\t\t};\n\n\t\t\tif ( !isDisabled )\n\t\t\t\tprops.onClick = ( this.props.updateOn === 'months' ?\n\t\t\t\t\tthis.updateSelectedMonth : this.props.setDate( 'month' ) );\n\n\t\t\tmonths.push( renderer( props, i, year, date && date.clone() ) );\n\n\t\t\tif ( months.length === 4 ) {\n\t\t\t\trows.push( DOM.tr({ key: month + '_' + rows.length }, months ) );\n\t\t\t\tmonths = [];\n\t\t\t}\n\n\t\t\ti++;\n\t\t}\n\n\t\treturn rows;\n\t},\n\n\tupdateSelectedMonth: function( event ) {\n\t\tthis.props.updateSelectedDate( event, true );\n\t},\n\n\trenderMonth: function( props, month ) {\n\t\tvar localMoment = this.props.viewDate;\n\t\tvar monthStr = localMoment.localeData().monthsShort( localMoment.month( month ) );\n\t\tvar strLength = 3;\n\t\t// Because some months are up to 5 characters long, we want to\n\t\t// use a fixed string length for consistency\n\t\tvar monthStrFixedLength = monthStr.substring( 0, strLength );\n\t\treturn DOM.td( props, capitalize( monthStrFixedLength ) );\n\t},\n\n\talwaysValidDate: function() {\n\t\treturn 1;\n\t}\n});\n\nfunction capitalize( str ) {\n\treturn str.charAt( 0 ).toUpperCase() + str.slice( 1 );\n}\n\nmodule.exports = DateTimePickerMonths;\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/MonthsView.js\n// module id = 5\n// module chunks = 0\n//# sourceURL=webpack:///./src/MonthsView.js?");
+	'use strict';
 
+	var React = __webpack_require__(3);
+
+	var DOM = React.DOM;
+	var DateTimePickerMonths = React.createClass({
+		render: function() {
+			return DOM.div({ className: 'rdtMonths' }, [
+				DOM.table({ key: 'a' }, DOM.thead( {}, DOM.tr( {}, [
+					DOM.th({ key: 'prev', className: 'rdtPrev' }, DOM.span({ onClick: this.props.subtractTime( 1, 'years' )}, '‹' )),
+					DOM.th({ key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colSpan: 2, 'data-value': this.props.viewDate.year() }, this.props.viewDate.year() ),
+					DOM.th({ key: 'next', className: 'rdtNext' }, DOM.span({ onClick: this.props.addTime( 1, 'years' )}, '›' ))
+				]))),
+				DOM.table({ key: 'months' }, DOM.tbody({ key: 'b' }, this.renderMonths()))
+			]);
+		},
+
+		renderMonths: function() {
+			var date = this.props.selectedDate,
+				month = this.props.viewDate.month(),
+				year = this.props.viewDate.year(),
+				rows = [],
+				i = 0,
+				months = [],
+				renderer = this.props.renderMonth || this.renderMonth,
+				isValid = this.props.isValidDate || this.alwaysValidDate,
+				classes, props, currentMonth, isDisabled, noOfDaysInMonth, daysInMonth, validDay,
+				// Date is irrelevant because we're only interested in month
+				irrelevantDate = 1
+			;
+
+			while (i < 12) {
+				classes = 'rdtMonth';
+				currentMonth =
+					this.props.viewDate.clone().set({ year: year, month: i, date: irrelevantDate });
+
+				noOfDaysInMonth = currentMonth.endOf( 'month' ).format( 'D' );
+				daysInMonth = Array.from({ length: noOfDaysInMonth }, function( e, i ) {
+					return i + 1;
+				});
+
+				validDay = daysInMonth.find(function( d ) {
+					var day = currentMonth.clone().set( 'date', d );
+					return isValid( day );
+				});
+
+				isDisabled = ( validDay === undefined );
+
+				if ( isDisabled )
+					classes += ' rdtDisabled';
+
+				if ( date && i === month && year === date.year() )
+					classes += ' rdtActive';
+
+				props = {
+					key: i,
+					'data-value': i,
+					className: classes
+				};
+
+				if ( !isDisabled )
+					props.onClick = ( this.props.updateOn === 'months' ?
+						this.updateSelectedMonth : this.props.setDate( 'month' ) );
+
+				months.push( renderer( props, i, year, date && date.clone() ) );
+
+				if ( months.length === 4 ) {
+					rows.push( DOM.tr({ key: month + '_' + rows.length }, months ) );
+					months = [];
+				}
+
+				i++;
+			}
+
+			return rows;
+		},
+
+		updateSelectedMonth: function( event ) {
+			this.props.updateSelectedDate( event, true );
+		},
+
+		renderMonth: function( props, month ) {
+			var localMoment = this.props.viewDate;
+			var monthStr = localMoment.localeData().monthsShort( localMoment.month( month ) );
+			var strLength = 3;
+			// Because some months are up to 5 characters long, we want to
+			// use a fixed string length for consistency
+			var monthStrFixedLength = monthStr.substring( 0, strLength );
+			return DOM.td( props, capitalize( monthStrFixedLength ) );
+		},
+
+		alwaysValidDate: function() {
+			return 1;
+		}
+	});
+
+	function capitalize( str ) {
+		return str.charAt( 0 ).toUpperCase() + str.slice( 1 );
+	}
+
+	module.exports = DateTimePickerMonths;
+
+
 /***/ },
@@ -104,4 +830,103 @@ /* 6 */
 
-	eval("'use strict';\n\nvar React = __webpack_require__(3);\n\nvar DOM = React.DOM;\nvar DateTimePickerYears = React.createClass({\n\trender: function() {\n\t\tvar year = parseInt( this.props.viewDate.year() / 10, 10 ) * 10;\n\n\t\treturn DOM.div({ className: 'rdtYears' }, [\n\t\t\tDOM.table({ key: 'a' }, DOM.thead({}, DOM.tr({}, [\n\t\t\t\tDOM.th({ key: 'prev', className: 'rdtPrev' }, DOM.span({ onClick: this.props.subtractTime( 10, 'years' )}, '‹' )),\n\t\t\t\tDOM.th({ key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colSpan: 2 }, year + '-' + ( year + 9 ) ),\n\t\t\t\tDOM.th({ key: 'next', className: 'rdtNext' }, DOM.span({ onClick: this.props.addTime( 10, 'years' )}, '›' ))\n\t\t\t\t]))),\n\t\t\tDOM.table({ key: 'years' }, DOM.tbody( {}, this.renderYears( year )))\n\t\t]);\n\t},\n\n\trenderYears: function( year ) {\n\t\tvar years = [],\n\t\t\ti = -1,\n\t\t\trows = [],\n\t\t\trenderer = this.props.renderYear || this.renderYear,\n\t\t\tselectedDate = this.props.selectedDate,\n\t\t\tisValid = this.props.isValidDate || this.alwaysValidDate,\n\t\t\tclasses, props, currentYear, isDisabled, noOfDaysInYear, daysInYear, validDay,\n\t\t\t// Month and date are irrelevant here because\n\t\t\t// we're only interested in the year\n\t\t\tirrelevantMonth = 0,\n\t\t\tirrelevantDate = 1\n\t\t;\n\n\t\tyear--;\n\t\twhile (i < 11) {\n\t\t\tclasses = 'rdtYear';\n\t\t\tcurrentYear = this.props.viewDate.clone().set(\n\t\t\t\t{ year: year, month: irrelevantMonth, date: irrelevantDate } );\n\n\t\t\t// Not sure what 'rdtOld' is for, commenting out for now as it's not working properly\n\t\t\t// if ( i === -1 | i === 10 )\n\t\t\t\t// classes += ' rdtOld';\n\n\t\t\tnoOfDaysInYear = currentYear.endOf( 'year' ).format( 'DDD' );\n\t\t\tdaysInYear = Array.from({ length: noOfDaysInYear }, function( e, i ) {\n\t\t\t\treturn i + 1;\n\t\t\t});\n\n\t\t\tvalidDay = daysInYear.find(function( d ) {\n\t\t\t\tvar day = currentYear.clone().dayOfYear( d );\n\t\t\t\treturn isValid( day );\n\t\t\t});\n\n\t\t\tisDisabled = ( validDay === undefined );\n\n\t\t\tif ( isDisabled )\n\t\t\t\tclasses += ' rdtDisabled';\n\n\t\t\tif ( selectedDate && selectedDate.year() === year )\n\t\t\t\tclasses += ' rdtActive';\n\n\t\t\tprops = {\n\t\t\t\tkey: year,\n\t\t\t\t'data-value': year,\n\t\t\t\tclassName: classes\n\t\t\t};\n\n\t\t\tif ( !isDisabled )\n\t\t\t\tprops.onClick = ( this.props.updateOn === 'years' ?\n\t\t\t\t\tthis.updateSelectedYear : this.props.setDate('year') );\n\n\t\t\tyears.push( renderer( props, year, selectedDate && selectedDate.clone() ));\n\n\t\t\tif ( years.length === 4 ) {\n\t\t\t\trows.push( DOM.tr({ key: i }, years ) );\n\t\t\t\tyears = [];\n\t\t\t}\n\n\t\t\tyear++;\n\t\t\ti++;\n\t\t}\n\n\t\treturn rows;\n\t},\n\n\tupdateSelectedYear: function( event ) {\n\t\tthis.props.updateSelectedDate( event, true );\n\t},\n\n\trenderYear: function( props, year ) {\n\t\treturn DOM.td( props, year );\n\t},\n\n\talwaysValidDate: function() {\n\t\treturn 1;\n\t}\n});\n\nmodule.exports = DateTimePickerYears;\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/YearsView.js\n// module id = 6\n// module chunks = 0\n//# sourceURL=webpack:///./src/YearsView.js?");
+	'use strict';
 
+	var React = __webpack_require__(3);
+
+	var DOM = React.DOM;
+	var DateTimePickerYears = React.createClass({
+		render: function() {
+			var year = parseInt( this.props.viewDate.year() / 10, 10 ) * 10;
+
+			return DOM.div({ className: 'rdtYears' }, [
+				DOM.table({ key: 'a' }, DOM.thead({}, DOM.tr({}, [
+					DOM.th({ key: 'prev', className: 'rdtPrev' }, DOM.span({ onClick: this.props.subtractTime( 10, 'years' )}, '‹' )),
+					DOM.th({ key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colSpan: 2 }, year + '-' + ( year + 9 ) ),
+					DOM.th({ key: 'next', className: 'rdtNext' }, DOM.span({ onClick: this.props.addTime( 10, 'years' )}, '›' ))
+					]))),
+				DOM.table({ key: 'years' }, DOM.tbody( {}, this.renderYears( year )))
+			]);
+		},
+
+		renderYears: function( year ) {
+			var years = [],
+				i = -1,
+				rows = [],
+				renderer = this.props.renderYear || this.renderYear,
+				selectedDate = this.props.selectedDate,
+				isValid = this.props.isValidDate || this.alwaysValidDate,
+				classes, props, currentYear, isDisabled, noOfDaysInYear, daysInYear, validDay,
+				// Month and date are irrelevant here because
+				// we're only interested in the year
+				irrelevantMonth = 0,
+				irrelevantDate = 1
+			;
+
+			year--;
+			while (i < 11) {
+				classes = 'rdtYear';
+				currentYear = this.props.viewDate.clone().set(
+					{ year: year, month: irrelevantMonth, date: irrelevantDate } );
+
+				// Not sure what 'rdtOld' is for, commenting out for now as it's not working properly
+				// if ( i === -1 | i === 10 )
+					// classes += ' rdtOld';
+
+				noOfDaysInYear = currentYear.endOf( 'year' ).format( 'DDD' );
+				daysInYear = Array.from({ length: noOfDaysInYear }, function( e, i ) {
+					return i + 1;
+				});
+
+				validDay = daysInYear.find(function( d ) {
+					var day = currentYear.clone().dayOfYear( d );
+					return isValid( day );
+				});
+
+				isDisabled = ( validDay === undefined );
+
+				if ( isDisabled )
+					classes += ' rdtDisabled';
+
+				if ( selectedDate && selectedDate.year() === year )
+					classes += ' rdtActive';
+
+				props = {
+					key: year,
+					'data-value': year,
+					className: classes
+				};
+
+				if ( !isDisabled )
+					props.onClick = ( this.props.updateOn === 'years' ?
+						this.updateSelectedYear : this.props.setDate('year') );
+
+				years.push( renderer( props, year, selectedDate && selectedDate.clone() ));
+
+				if ( years.length === 4 ) {
+					rows.push( DOM.tr({ key: i }, years ) );
+					years = [];
+				}
+
+				year++;
+				i++;
+			}
+
+			return rows;
+		},
+
+		updateSelectedYear: function( event ) {
+			this.props.updateSelectedDate( event, true );
+		},
+
+		renderYear: function( props, year ) {
+			return DOM.td( props, year );
+		},
+
+		alwaysValidDate: function() {
+			return 1;
+		}
+	});
+
+	module.exports = DateTimePickerYears;
+
+
 /***/ },
@@ -111,4 +936,227 @@ /* 7 */
 
-	eval("'use strict';\n\nvar React = __webpack_require__(3),\n\tassign = __webpack_require__(1)\n;\n\nvar DOM = React.DOM;\nvar DateTimePickerTime = React.createClass({\n\tgetInitialState: function() {\n\t\treturn this.calculateState( this.props );\n\t},\n\n\tcalculateState: function( props ) {\n\t\tvar date = props.selectedDate || props.viewDate,\n\t\t\tformat = props.timeFormat,\n\t\t\tcounters = []\n\t\t;\n\n\t\tif ( format.toLowerCase().indexOf('h') !== -1 ) {\n\t\t\tcounters.push('hours');\n\t\t\tif ( format.indexOf('m') !== -1 ) {\n\t\t\t\tcounters.push('minutes');\n\t\t\t\tif ( format.indexOf('s') !== -1 ) {\n\t\t\t\t\tcounters.push('seconds');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tvar daypart = false;\n\t\tif ( this.state !== null && this.props.timeFormat.toLowerCase().indexOf( ' a' ) !== -1 ) {\n\t\t\tif ( this.props.timeFormat.indexOf( ' A' ) !== -1 ) {\n\t\t\t\tdaypart = ( this.state.hours >= 12 ) ? 'PM' : 'AM';\n\t\t\t} else {\n\t\t\t\tdaypart = ( this.state.hours >= 12 ) ? 'pm' : 'am';\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\thours: date.format( 'H' ),\n\t\t\tminutes: date.format( 'mm' ),\n\t\t\tseconds: date.format( 'ss' ),\n\t\t\tmilliseconds: date.format( 'SSS' ),\n\t\t\tdaypart: daypart,\n\t\t\tcounters: counters\n\t\t};\n\t},\n\n\trenderCounter: function( type ) {\n\t\tif ( type !== 'daypart' ) {\n\t\t\tvar value = this.state[ type ];\n\t\t\tif ( type === 'hours' && this.props.timeFormat.toLowerCase().indexOf( ' a' ) !== -1 ) {\n\t\t\t\tvalue = ( value - 1 ) % 12 + 1;\n\n\t\t\t\tif ( value === 0 ) {\n\t\t\t\t\tvalue = 12;\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn DOM.div({ key: type, className: 'rdtCounter' }, [\n\t\t\t\tDOM.span({ key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'increase', type ) }, '▲' ),\n\t\t\t\tDOM.div({ key: 'c', className: 'rdtCount' }, value ),\n\t\t\t\tDOM.span({ key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'decrease', type ) }, '▼' )\n\t\t\t]);\n\t\t}\n\t\treturn '';\n\t},\n\n\trenderDayPart: function() {\n\t\treturn DOM.div({ key: 'dayPart', className: 'rdtCounter' }, [\n\t\t\tDOM.span({ key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours') }, '▲' ),\n\t\t\tDOM.div({ key: this.state.daypart, className: 'rdtCount' }, this.state.daypart ),\n\t\t\tDOM.span({ key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours') }, '▼' )\n\t\t]);\n\t},\n\n\trender: function() {\n\t\tvar me = this,\n\t\t\tcounters = []\n\t\t;\n\n\t\tthis.state.counters.forEach( function( c ) {\n\t\t\tif ( counters.length )\n\t\t\t\tcounters.push( DOM.div({ key: 'sep' + counters.length, className: 'rdtCounterSeparator' }, ':' ) );\n\t\t\tcounters.push( me.renderCounter( c ) );\n\t\t});\n\n\t\tif ( this.state.daypart !== false ) {\n\t\t\tcounters.push( me.renderDayPart() );\n\t\t}\n\n\t\tif ( this.state.counters.length === 3 && this.props.timeFormat.indexOf( 'S' ) !== -1 ) {\n\t\t\tcounters.push( DOM.div({ className: 'rdtCounterSeparator', key: 'sep5' }, ':' ) );\n\t\t\tcounters.push(\n\t\t\t\tDOM.div({ className: 'rdtCounter rdtMilli', key: 'm' },\n\t\t\t\t\tDOM.input({ value: this.state.milliseconds, type: 'text', onChange: this.updateMilli } )\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t}\n\n\t\treturn DOM.div({ className: 'rdtTime' },\n\t\t\tDOM.table({}, [\n\t\t\t\tthis.renderHeader(),\n\t\t\t\tDOM.tbody({ key: 'b'}, DOM.tr({}, DOM.td({},\n\t\t\t\t\tDOM.div({ className: 'rdtCounters' }, counters )\n\t\t\t\t)))\n\t\t\t])\n\t\t);\n\t},\n\n\tcomponentWillMount: function() {\n\t\tvar me = this;\n\t\tme.timeConstraints = {\n\t\t\thours: {\n\t\t\t\tmin: 0,\n\t\t\t\tmax: 23,\n\t\t\t\tstep: 1\n\t\t\t},\n\t\t\tminutes: {\n\t\t\t\tmin: 0,\n\t\t\t\tmax: 59,\n\t\t\t\tstep: 1\n\t\t\t},\n\t\t\tseconds: {\n\t\t\t\tmin: 0,\n\t\t\t\tmax: 59,\n\t\t\t\tstep: 1\n\t\t\t},\n\t\t\tmilliseconds: {\n\t\t\t\tmin: 0,\n\t\t\t\tmax: 999,\n\t\t\t\tstep: 1\n\t\t\t}\n\t\t};\n\t\t['hours', 'minutes', 'seconds', 'milliseconds'].forEach( function( type ) {\n\t\t\tassign(me.timeConstraints[ type ], me.props.timeConstraints[ type ]);\n\t\t});\n\t\tthis.setState( this.calculateState( this.props ) );\n\t},\n\n\tcomponentWillReceiveProps: function( nextProps ) {\n\t\tthis.setState( this.calculateState( nextProps ) );\n\t},\n\n\tupdateMilli: function( e ) {\n\t\tvar milli = parseInt( e.target.value, 10 );\n\t\tif ( milli === e.target.value && milli >= 0 && milli < 1000 ) {\n\t\t\tthis.props.setTime( 'milliseconds', milli );\n\t\t\tthis.setState( { milliseconds: milli } );\n\t\t}\n\t},\n\n\trenderHeader: function() {\n\t\tif ( !this.props.dateFormat )\n\t\t\treturn null;\n\n\t\tvar date = this.props.selectedDate || this.props.viewDate;\n\t\treturn DOM.thead({ key: 'h' }, DOM.tr({},\n\t\t\tDOM.th({ className: 'rdtSwitch', colSpan: 4, onClick: this.props.showView( 'days' ) }, date.format( this.props.dateFormat ) )\n\t\t));\n\t},\n\n\tonStartClicking: function( action, type ) {\n\t\tvar me = this;\n\n\t\treturn function() {\n\t\t\tvar update = {};\n\t\t\tupdate[ type ] = me[ action ]( type );\n\t\t\tme.setState( update );\n\n\t\t\tme.timer = setTimeout( function() {\n\t\t\t\tme.increaseTimer = setInterval( function() {\n\t\t\t\t\tupdate[ type ] = me[ action ]( type );\n\t\t\t\t\tme.setState( update );\n\t\t\t\t}, 70);\n\t\t\t}, 500);\n\n\t\t\tme.mouseUpListener = function() {\n\t\t\t\tclearTimeout( me.timer );\n\t\t\t\tclearInterval( me.increaseTimer );\n\t\t\t\tme.props.setTime( type, me.state[ type ] );\n\t\t\t\tdocument.body.removeEventListener( 'mouseup', me.mouseUpListener );\n\t\t\t};\n\n\t\t\tdocument.body.addEventListener( 'mouseup', me.mouseUpListener );\n\t\t};\n\t},\n\n\tpadValues: {\n\t\thours: 1,\n\t\tminutes: 2,\n\t\tseconds: 2,\n\t\tmilliseconds: 3\n\t},\n\n\ttoggleDayPart: function( type ) { // type is always 'hours'\n\t\tvar value = parseInt( this.state[ type ], 10) + 12;\n\t\tif ( value > this.timeConstraints[ type ].max )\n\t\t\tvalue = this.timeConstraints[ type ].min + ( value - ( this.timeConstraints[ type ].max + 1 ) );\n\t\treturn this.pad( type, value );\n\t},\n\n\tincrease: function( type ) {\n\t\tvar value = parseInt( this.state[ type ], 10) + this.timeConstraints[ type ].step;\n\t\tif ( value > this.timeConstraints[ type ].max )\n\t\t\tvalue = this.timeConstraints[ type ].min + ( value - ( this.timeConstraints[ type ].max + 1 ) );\n\t\treturn this.pad( type, value );\n\t},\n\n\tdecrease: function( type ) {\n\t\tvar value = parseInt( this.state[ type ], 10) - this.timeConstraints[ type ].step;\n\t\tif ( value < this.timeConstraints[ type ].min )\n\t\t\tvalue = this.timeConstraints[ type ].max + 1 - ( this.timeConstraints[ type ].min - value );\n\t\treturn this.pad( type, value );\n\t},\n\n\tpad: function( type, value ) {\n\t\tvar str = value + '';\n\t\twhile ( str.length < this.padValues[ type ] )\n\t\t\tstr = '0' + str;\n\t\treturn str;\n\t}\n});\n\nmodule.exports = DateTimePickerTime;\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/TimeView.js\n// module id = 7\n// module chunks = 0\n//# sourceURL=webpack:///./src/TimeView.js?");
+	'use strict';
 
+	var React = __webpack_require__(3),
+		assign = __webpack_require__(1)
+	;
+
+	var DOM = React.DOM;
+	var DateTimePickerTime = React.createClass({
+		getInitialState: function() {
+			return this.calculateState( this.props );
+		},
+
+		calculateState: function( props ) {
+			var date = props.selectedDate || props.viewDate,
+				format = props.timeFormat,
+				counters = []
+			;
+
+			if ( format.toLowerCase().indexOf('h') !== -1 ) {
+				counters.push('hours');
+				if ( format.indexOf('m') !== -1 ) {
+					counters.push('minutes');
+					if ( format.indexOf('s') !== -1 ) {
+						counters.push('seconds');
+					}
+				}
+			}
+
+			var daypart = false;
+			if ( this.state !== null && this.props.timeFormat.toLowerCase().indexOf( ' a' ) !== -1 ) {
+				if ( this.props.timeFormat.indexOf( ' A' ) !== -1 ) {
+					daypart = ( this.state.hours >= 12 ) ? 'PM' : 'AM';
+				} else {
+					daypart = ( this.state.hours >= 12 ) ? 'pm' : 'am';
+				}
+			}
+
+			return {
+				hours: date.format( 'H' ),
+				minutes: date.format( 'mm' ),
+				seconds: date.format( 'ss' ),
+				milliseconds: date.format( 'SSS' ),
+				daypart: daypart,
+				counters: counters
+			};
+		},
+
+		renderCounter: function( type ) {
+			if ( type !== 'daypart' ) {
+				var value = this.state[ type ];
+				if ( type === 'hours' && this.props.timeFormat.toLowerCase().indexOf( ' a' ) !== -1 ) {
+					value = ( value - 1 ) % 12 + 1;
+
+					if ( value === 0 ) {
+						value = 12;
+					}
+				}
+				return DOM.div({ key: type, className: 'rdtCounter' }, [
+					DOM.span({ key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'increase', type ) }, '▲' ),
+					DOM.div({ key: 'c', className: 'rdtCount' }, value ),
+					DOM.span({ key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'decrease', type ) }, '▼' )
+				]);
+			}
+			return '';
+		},
+
+		renderDayPart: function() {
+			return DOM.div({ key: 'dayPart', className: 'rdtCounter' }, [
+				DOM.span({ key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours') }, '▲' ),
+				DOM.div({ key: this.state.daypart, className: 'rdtCount' }, this.state.daypart ),
+				DOM.span({ key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours') }, '▼' )
+			]);
+		},
+
+		render: function() {
+			var me = this,
+				counters = []
+			;
+
+			this.state.counters.forEach( function( c ) {
+				if ( counters.length )
+					counters.push( DOM.div({ key: 'sep' + counters.length, className: 'rdtCounterSeparator' }, ':' ) );
+				counters.push( me.renderCounter( c ) );
+			});
+
+			if ( this.state.daypart !== false ) {
+				counters.push( me.renderDayPart() );
+			}
+
+			if ( this.state.counters.length === 3 && this.props.timeFormat.indexOf( 'S' ) !== -1 ) {
+				counters.push( DOM.div({ className: 'rdtCounterSeparator', key: 'sep5' }, ':' ) );
+				counters.push(
+					DOM.div({ className: 'rdtCounter rdtMilli', key: 'm' },
+						DOM.input({ value: this.state.milliseconds, type: 'text', onChange: this.updateMilli } )
+						)
+					);
+			}
+
+			return DOM.div({ className: 'rdtTime' },
+				DOM.table({}, [
+					this.renderHeader(),
+					DOM.tbody({ key: 'b'}, DOM.tr({}, DOM.td({},
+						DOM.div({ className: 'rdtCounters' }, counters )
+					)))
+				])
+			);
+		},
+
+		componentWillMount: function() {
+			var me = this;
+			me.timeConstraints = {
+				hours: {
+					min: 0,
+					max: 23,
+					step: 1
+				},
+				minutes: {
+					min: 0,
+					max: 59,
+					step: 1
+				},
+				seconds: {
+					min: 0,
+					max: 59,
+					step: 1
+				},
+				milliseconds: {
+					min: 0,
+					max: 999,
+					step: 1
+				}
+			};
+			['hours', 'minutes', 'seconds', 'milliseconds'].forEach( function( type ) {
+				assign(me.timeConstraints[ type ], me.props.timeConstraints[ type ]);
+			});
+			this.setState( this.calculateState( this.props ) );
+		},
+
+		componentWillReceiveProps: function( nextProps ) {
+			this.setState( this.calculateState( nextProps ) );
+		},
+
+		updateMilli: function( e ) {
+			var milli = parseInt( e.target.value, 10 );
+			if ( milli === e.target.value && milli >= 0 && milli < 1000 ) {
+				this.props.setTime( 'milliseconds', milli );
+				this.setState( { milliseconds: milli } );
+			}
+		},
+
+		renderHeader: function() {
+			if ( !this.props.dateFormat )
+				return null;
+
+			var date = this.props.selectedDate || this.props.viewDate;
+			return DOM.thead({ key: 'h' }, DOM.tr({},
+				DOM.th({ className: 'rdtSwitch', colSpan: 4, onClick: this.props.showView( 'days' ) }, date.format( this.props.dateFormat ) )
+			));
+		},
+
+		onStartClicking: function( action, type ) {
+			var me = this;
+
+			return function() {
+				var update = {};
+				update[ type ] = me[ action ]( type );
+				me.setState( update );
+
+				me.timer = setTimeout( function() {
+					me.increaseTimer = setInterval( function() {
+						update[ type ] = me[ action ]( type );
+						me.setState( update );
+					}, 70);
+				}, 500);
+
+				me.mouseUpListener = function() {
+					clearTimeout( me.timer );
+					clearInterval( me.increaseTimer );
+					me.props.setTime( type, me.state[ type ] );
+					document.body.removeEventListener( 'mouseup', me.mouseUpListener );
+				};
+
+				document.body.addEventListener( 'mouseup', me.mouseUpListener );
+			};
+		},
+
+		padValues: {
+			hours: 1,
+			minutes: 2,
+			seconds: 2,
+			milliseconds: 3
+		},
+
+		toggleDayPart: function( type ) { // type is always 'hours'
+			var value = parseInt( this.state[ type ], 10) + 12;
+			if ( value > this.timeConstraints[ type ].max )
+				value = this.timeConstraints[ type ].min + ( value - ( this.timeConstraints[ type ].max + 1 ) );
+			return this.pad( type, value );
+		},
+
+		increase: function( type ) {
+			var value = parseInt( this.state[ type ], 10) + this.timeConstraints[ type ].step;
+			if ( value > this.timeConstraints[ type ].max )
+				value = this.timeConstraints[ type ].min + ( value - ( this.timeConstraints[ type ].max + 1 ) );
+			return this.pad( type, value );
+		},
+
+		decrease: function( type ) {
+			var value = parseInt( this.state[ type ], 10) - this.timeConstraints[ type ].step;
+			if ( value < this.timeConstraints[ type ].min )
+				value = this.timeConstraints[ type ].max + 1 - ( this.timeConstraints[ type ].min - value );
+			return this.pad( type, value );
+		},
+
+		pad: function( type, value ) {
+			var str = value + '';
+			while ( str.length < this.padValues[ type ] )
+				str = '0' + str;
+			return str;
+		}
+	});
+
+	module.exports = DateTimePickerTime;
+
+
 /***/ },
@@ -118,4 +1166,107 @@ /* 8 */
 
-	eval("'use strict';\n\n// This is extracted from https://github.com/Pomax/react-onclickoutside\n// And modified to support react 0.13 and react 0.14\n\nvar React = __webpack_require__(3),\n\tversion = React.version && React.version.split('.')\n;\n\nif ( version && ( version[0] > 0 || version[1] > 13 ) )\n\tReact = __webpack_require__(9);\n\n// Use a parallel array because we can't use\n// objects as keys, they get toString-coerced\nvar registeredComponents = [];\nvar handlers = [];\n\nvar IGNORE_CLASS = 'ignore-react-onclickoutside';\n\nvar isSourceFound = function(source, localNode) {\n if (source === localNode) {\n   return true;\n }\n // SVG <use/> elements do not technically reside in the rendered DOM, so\n // they do not have classList directly, but they offer a link to their\n // corresponding element, which can have classList. This extra check is for\n // that case.\n // See: http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGUseElement\n // Discussion: https://github.com/Pomax/react-onclickoutside/pull/17\n if (source.correspondingElement) {\n   return source.correspondingElement.classList.contains(IGNORE_CLASS);\n }\n return source.classList.contains(IGNORE_CLASS);\n};\n\nmodule.exports = {\n componentDidMount: function() {\n   if (typeof this.handleClickOutside !== 'function')\n     throw new Error('Component lacks a handleClickOutside(event) function for processing outside click events.');\n\n   var fn = this.__outsideClickHandler = (function(localNode, eventHandler) {\n     return function(evt) {\n       evt.stopPropagation();\n       var source = evt.target;\n       var found = false;\n       // If source=local then this event came from \"somewhere\"\n       // inside and should be ignored. We could handle this with\n       // a layered approach, too, but that requires going back to\n       // thinking in terms of Dom node nesting, running counter\n       // to React's \"you shouldn't care about the DOM\" philosophy.\n       while (source.parentNode) {\n         found = isSourceFound(source, localNode);\n         if (found) return;\n         source = source.parentNode;\n       }\n       eventHandler(evt);\n     };\n   }(React.findDOMNode(this), this.handleClickOutside));\n\n   var pos = registeredComponents.length;\n   registeredComponents.push(this);\n   handlers[pos] = fn;\n\n   // If there is a truthy disableOnClickOutside property for this\n   // component, don't immediately start listening for outside events.\n   if (!this.props.disableOnClickOutside) {\n     this.enableOnClickOutside();\n   }\n },\n\n componentWillUnmount: function() {\n   this.disableOnClickOutside();\n   this.__outsideClickHandler = false;\n   var pos = registeredComponents.indexOf(this);\n   if ( pos>-1) {\n     if (handlers[pos]) {\n       // clean up so we don't leak memory\n       handlers.splice(pos, 1);\n       registeredComponents.splice(pos, 1);\n     }\n   }\n },\n\n /**\n  * Can be called to explicitly enable event listening\n  * for clicks and touches outside of this element.\n  */\n enableOnClickOutside: function() {\n   var fn = this.__outsideClickHandler;\n   document.addEventListener('mousedown', fn);\n   document.addEventListener('touchstart', fn);\n },\n\n /**\n  * Can be called to explicitly disable event listening\n  * for clicks and touches outside of this element.\n  */\n disableOnClickOutside: function() {\n   var fn = this.__outsideClickHandler;\n   document.removeEventListener('mousedown', fn);\n   document.removeEventListener('touchstart', fn);\n }\n};\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/onClickOutside.js\n// module id = 8\n// module chunks = 0\n//# sourceURL=webpack:///./src/onClickOutside.js?");
+	'use strict';
 
+	// This is extracted from https://github.com/Pomax/react-onclickoutside
+	// And modified to support react 0.13 and react 0.14
+
+	var React = __webpack_require__(3),
+		version = React.version && React.version.split('.')
+	;
+
+	if ( version && ( version[0] > 0 || version[1] > 13 ) )
+		React = __webpack_require__(9);
+
+	// Use a parallel array because we can't use
+	// objects as keys, they get toString-coerced
+	var registeredComponents = [];
+	var handlers = [];
+
+	var IGNORE_CLASS = 'ignore-react-onclickoutside';
+
+	var isSourceFound = function(source, localNode) {
+	 if (source === localNode) {
+	   return true;
+	 }
+	 // SVG <use/> elements do not technically reside in the rendered DOM, so
+	 // they do not have classList directly, but they offer a link to their
+	 // corresponding element, which can have classList. This extra check is for
+	 // that case.
+	 // See: http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGUseElement
+	 // Discussion: https://github.com/Pomax/react-onclickoutside/pull/17
+	 if (source.correspondingElement) {
+	   return source.correspondingElement.classList.contains(IGNORE_CLASS);
+	 }
+	 return source.classList.contains(IGNORE_CLASS);
+	};
+
+	module.exports = {
+	 componentDidMount: function() {
+	   if (typeof this.handleClickOutside !== 'function')
+	     throw new Error('Component lacks a handleClickOutside(event) function for processing outside click events.');
+
+	   var fn = this.__outsideClickHandler = (function(localNode, eventHandler) {
+	     return function(evt) {
+	       evt.stopPropagation();
+	       var source = evt.target;
+	       var found = false;
+	       // If source=local then this event came from "somewhere"
+	       // inside and should be ignored. We could handle this with
+	       // a layered approach, too, but that requires going back to
+	       // thinking in terms of Dom node nesting, running counter
+	       // to React's "you shouldn't care about the DOM" philosophy.
+	       while (source.parentNode) {
+	         found = isSourceFound(source, localNode);
+	         if (found) return;
+	         source = source.parentNode;
+	       }
+	       eventHandler(evt);
+	     };
+	   }(React.findDOMNode(this), this.handleClickOutside));
+
+	   var pos = registeredComponents.length;
+	   registeredComponents.push(this);
+	   handlers[pos] = fn;
+
+	   // If there is a truthy disableOnClickOutside property for this
+	   // component, don't immediately start listening for outside events.
+	   if (!this.props.disableOnClickOutside) {
+	     this.enableOnClickOutside();
+	   }
+	 },
+
+	 componentWillUnmount: function() {
+	   this.disableOnClickOutside();
+	   this.__outsideClickHandler = false;
+	   var pos = registeredComponents.indexOf(this);
+	   if ( pos>-1) {
+	     if (handlers[pos]) {
+	       // clean up so we don't leak memory
+	       handlers.splice(pos, 1);
+	       registeredComponents.splice(pos, 1);
+	     }
+	   }
+	 },
+
+	 /**
+	  * Can be called to explicitly enable event listening
+	  * for clicks and touches outside of this element.
+	  */
+	 enableOnClickOutside: function() {
+	   var fn = this.__outsideClickHandler;
+	   document.addEventListener('mousedown', fn);
+	   document.addEventListener('touchstart', fn);
+	 },
+
+	 /**
+	  * Can be called to explicitly disable event listening
+	  * for clicks and touches outside of this element.
+	  */
+	 disableOnClickOutside: function() {
+	   var fn = this.__outsideClickHandler;
+	   document.removeEventListener('mousedown', fn);
+	   document.removeEventListener('touchstart', fn);
+	 }
+	};
+
+
 /***/ },
@@ -125,3 +1276,3 @@ /* 9 */
 
-	eval("module.exports = __WEBPACK_EXTERNAL_MODULE_9__;\n\n//////////////////\n// WEBPACK FOOTER\n// external \"ReactDOM\"\n// module id = 9\n// module chunks = 0\n//# sourceURL=webpack:///external_%22ReactDOM%22?");
+	module.exports = __WEBPACK_EXTERNAL_MODULE_9__;
 
@@ -131,2 +1282,2 @@ /***/ }
 });
-;
+;

dist/react-datetime.min.js

 /*
-react-datetime v2.8.4
-https://github.com/arqex/react-datetime
-MIT: https://github.com/arqex/react-datetime/raw/master/LICENSE
+react-datetime v2.8.5
+https://github.com/YouCanBookMe/react-datetime
+MIT: https://github.com/YouCanBookMe/react-datetime/raw/master/LICENSE
 */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("moment"),require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["moment","React","ReactDOM"],e):"object"==typeof exports?exports.Datetime=e(require("moment"),require("React"),require("ReactDOM")):t.Datetime=e(t.moment,t.React,t.ReactDOM)}(this,function(t,e,s){return function(t){function e(a){if(s[a])return s[a].exports;var n=s[a]={exports:{},id:a,loaded:!1};return t[a].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var s={};return e.m=t,e.c=s,e.p="",e(0)}([function(t,e,s){"use strict";var a=s(1),n=s(2),r=s(3),i=s(4),o=s(5),c=s(6),p=s(7),u=r.PropTypes,d=r.createClass({mixins:[s(8)],viewComponents:{days:i,months:o,years:c,time:p},propTypes:{onFocus:u.func,onBlur:u.func,onChange:u.func,locale:u.string,utc:u.bool,input:u.bool,inputProps:u.object,timeConstraints:u.object,viewMode:u.oneOf(["years","months","days","time"]),isValidDate:u.func,open:u.bool,strictParsing:u.bool,closeOnSelect:u.bool,closeOnTab:u.bool},getDefaultProps:function(){var t=function(){};return{className:"",defaultValue:"",inputProps:{},input:!0,onFocus:t,onBlur:t,onChange:t,timeFormat:!0,timeConstraints:{},dateFormat:!0,strictParsing:!0,closeOnSelect:!1,closeOnTab:!0,utc:!1}},getInitialState:function(){var t=this.getStateFromProps(this.props);return void 0===t.open&&(t.open=!this.props.input),t.currentView=this.props.dateFormat?this.props.viewMode||t.updateOn||"days":"time",t},getStateFromProps:function(t){var e,s,a,n,r=this.getFormats(t),i=t.value||t.defaultValue;return i&&"string"==typeof i?e=this.localMoment(i,r.datetime):i&&(e=this.localMoment(i)),e&&!e.isValid()&&(e=null),s=e?e.clone().startOf("month"):this.localMoment().startOf("month"),a=this.getUpdateOn(r),n=e?e.format(r.datetime):i.isValid&&!i.isValid()?"":i||"",{updateOn:a,inputFormat:r.datetime,viewDate:s,selectedDate:e,inputValue:n,open:t.open}},getUpdateOn:function(t){return t.date.match(/[lLD]/)?"days":t.date.indexOf("M")!==-1?"months":t.date.indexOf("Y")!==-1?"years":"days"},getFormats:function(t){var e={date:t.dateFormat||"",time:t.timeFormat||""},s=this.localMoment(t.date).localeData();return e.date===!0?e.date=s.longDateFormat("L"):"days"!==this.getUpdateOn(e)&&(e.time=""),e.time===!0&&(e.time=s.longDateFormat("LT")),e.datetime=e.date&&e.time?e.date+" "+e.time:e.date||e.time,e},componentWillReceiveProps:function(t){var e=this.getFormats(t),s={};t.value===this.props.value&&e.datetime===this.getFormats(this.props).datetime||(s=this.getStateFromProps(t)),void 0===s.open&&(s.open=this.state.open),t.viewMode!==this.props.viewMode&&(s.currentView=t.viewMode),this.setState(s)},onInputChange:function(t){var e=null===t.target?t:t.target.value,s=this.localMoment(e,this.state.inputFormat),a={inputValue:e};return s.isValid()&&!this.props.value?(a.selectedDate=s,a.viewDate=s.clone().startOf("month")):a.selectedDate=null,this.setState(a,function(){return this.props.onChange(s.isValid()?s:this.state.inputValue)})},onInputKey:function(t){9===t.which&&this.props.closeOnTab&&this.closeCalendar()},showView:function(t){var e=this;return function(){e.setState({currentView:t})}},setDate:function(t){var e=this,s={month:"days",year:"months"};return function(a){e.setState({viewDate:e.state.viewDate.clone()[t](parseInt(a.target.getAttribute("data-value"),10)).startOf(t),currentView:s[t]})}},addTime:function(t,e,s){return this.updateTime("add",t,e,s)},subtractTime:function(t,e,s){return this.updateTime("subtract",t,e,s)},updateTime:function(t,e,s,a){var n=this;return function(){var r={},i=a?"selectedDate":"viewDate";r[i]=n.state[i].clone()[t](e,s),n.setState(r)}},allowedSetTime:["hours","minutes","seconds","milliseconds"],setTime:function(t,e){var s,a=this.allowedSetTime.indexOf(t)+1,n=this.state,r=(n.selectedDate||n.viewDate).clone();for(r[t](e);a<this.allowedSetTime.length;a++)s=this.allowedSetTime[a],r[s](r[s]());this.props.value||this.setState({selectedDate:r,inputValue:r.format(n.inputFormat)}),this.props.onChange(r)},updateSelectedDate:function(t,e){var s,a=t.target,n=0,r=this.state.viewDate,i=this.state.selectedDate||r;a.className.indexOf("rdtDay")!==-1?(a.className.indexOf("rdtNew")!==-1?n=1:a.className.indexOf("rdtOld")!==-1&&(n=-1),s=r.clone().month(r.month()+n).date(parseInt(a.getAttribute("data-value"),10))):a.className.indexOf("rdtMonth")!==-1?s=r.clone().month(parseInt(a.getAttribute("data-value"),10)).date(i.date()):a.className.indexOf("rdtYear")!==-1&&(s=r.clone().month(i.month()).date(i.date()).year(parseInt(a.getAttribute("data-value"),10))),s.hours(i.hours()).minutes(i.minutes()).seconds(i.seconds()).milliseconds(i.milliseconds()),this.props.value?this.props.closeOnSelect&&e&&this.closeCalendar():this.setState({selectedDate:s,viewDate:s.clone().startOf("month"),inputValue:s.format(this.state.inputFormat),open:!(this.props.closeOnSelect&&e)}),this.props.onChange(s)},openCalendar:function(){this.state.open||this.setState({open:!0},function(){this.props.onFocus()})},closeCalendar:function(){this.setState({open:!1},function(){this.props.onBlur(this.state.selectedDate||this.state.inputValue)})},handleClickOutside:function(){this.props.input&&this.state.open&&!this.props.open&&this.setState({open:!1},function(){this.props.onBlur(this.state.selectedDate||this.state.inputValue)})},localMoment:function(t,e){var s=this.props.utc?n.utc:n,a=s(t,e,this.props.strictParsing);return this.props.locale&&a.locale(this.props.locale),a},componentProps:{fromProps:["value","isValidDate","renderDay","renderMonth","renderYear","timeConstraints"],fromState:["viewDate","selectedDate","updateOn"],fromThis:["setDate","setTime","showView","addTime","subtractTime","updateSelectedDate","localMoment"]},getComponentProps:function(){var t=this,e=this.getFormats(this.props),s={dateFormat:e.date,timeFormat:e.time};return this.componentProps.fromProps.forEach(function(e){s[e]=t.props[e]}),this.componentProps.fromState.forEach(function(e){s[e]=t.state[e]}),this.componentProps.fromThis.forEach(function(e){s[e]=t[e]}),s},render:function(){var t=this.viewComponents[this.state.currentView],e=r.DOM,s="rdt"+(this.props.className?Array.isArray(this.props.className)?" "+this.props.className.join(" "):" "+this.props.className:""),n=[];return this.props.input?n=[e.input(a({key:"i",type:"text",className:"form-control",onFocus:this.openCalendar,onChange:this.onInputChange,onKeyDown:this.onInputKey,value:this.state.inputValue},this.props.inputProps))]:s+=" rdtStatic",this.state.open&&(s+=" rdtOpen"),e.div({className:s},n.concat(e.div({key:"dt",className:"rdtPicker"},r.createElement(t,this.getComponentProps()))))}});d.moment=n,t.exports=d},function(t,e){"use strict";function s(t){if(null==t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}function a(t){var e=Object.getOwnPropertyNames(t);return Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(t))),e.filter(function(e){return n.call(t,e)})}var n=Object.prototype.propertyIsEnumerable;t.exports=Object.assign||function(t,e){for(var n,r,i=s(t),o=1;o<arguments.length;o++){n=arguments[o],r=a(Object(n));for(var c=0;c<r.length;c++)i[r[c]]=n[r[c]]}return i}},function(e,s){e.exports=t},function(t,s){t.exports=e},function(t,e,s){"use strict";var a=s(3),n=s(2),r=a.DOM,i=a.createClass({render:function(){var t,e=this.renderFooter(),s=this.props.viewDate,a=s.localeData();return t=[r.thead({key:"th"},[r.tr({key:"h"},[r.th({key:"p",className:"rdtPrev"},r.span({onClick:this.props.subtractTime(1,"months")},"‹")),r.th({key:"s",className:"rdtSwitch",onClick:this.props.showView("months"),colSpan:5,"data-value":this.props.viewDate.month()},a.months(s)+" "+s.year()),r.th({key:"n",className:"rdtNext"},r.span({onClick:this.props.addTime(1,"months")},"›"))]),r.tr({key:"d"},this.getDaysOfWeek(a).map(function(t,e){return r.th({key:t+e,className:"dow"},t)}))]),r.tbody({key:"tb"},this.renderDays())],e&&t.push(e),r.div({className:"rdtDays"},r.table({},t))},getDaysOfWeek:function(t){var e=t._weekdaysMin,s=t.firstDayOfWeek(),a=[],n=0;return e.forEach(function(t){a[(7+n++-s)%7]=t}),a},renderDays:function(){var t,e,s,a,i=this.props.viewDate,o=this.props.selectedDate&&this.props.selectedDate.clone(),c=i.clone().subtract(1,"months"),p=i.year(),u=i.month(),d=[],l=[],h=this.props.renderDay||this.renderDay,m=this.props.isValidDate||this.alwaysValidDate;c.date(c.daysInMonth()).startOf("week");for(var f=c.clone().add(42,"d");c.isBefore(f);)t="rdtDay",a=c.clone(),c.year()===p&&c.month()<u||c.year()<p?t+=" rdtOld":(c.year()===p&&c.month()>u||c.year()>p)&&(t+=" rdtNew"),o&&c.isSame(o,"day")&&(t+=" rdtActive"),c.isSame(n(),"day")&&(t+=" rdtToday"),e=!m(a,o),e&&(t+=" rdtDisabled"),s={key:c.format("M_D"),"data-value":c.date(),className:t},e||(s.onClick=this.updateSelectedDate),l.push(h(s,a,o)),7===l.length&&(d.push(r.tr({key:c.format("M_D")},l)),l=[]),c.add(1,"d");return d},updateSelectedDate:function(t){this.props.updateSelectedDate(t,!0)},renderDay:function(t,e){return r.td(t,e.date())},renderFooter:function(){if(!this.props.timeFormat)return"";var t=this.props.selectedDate||this.props.viewDate;return r.tfoot({key:"tf"},r.tr({},r.td({onClick:this.props.showView("time"),colSpan:7,className:"rdtTimeToggle"},t.format(this.props.timeFormat))))},alwaysValidDate:function(){return 1}});t.exports=i},function(t,e,s){"use strict";function a(t){return t.charAt(0).toUpperCase()+t.slice(1)}var n=s(3),r=n.DOM,i=n.createClass({render:function(){return r.div({className:"rdtMonths"},[r.table({key:"a"},r.thead({},r.tr({},[r.th({key:"prev",className:"rdtPrev"},r.span({onClick:this.props.subtractTime(1,"years")},"‹")),r.th({key:"year",className:"rdtSwitch",onClick:this.props.showView("years"),colSpan:2,"data-value":this.props.viewDate.year()},this.props.viewDate.year()),r.th({key:"next",className:"rdtNext"},r.span({onClick:this.props.addTime(1,"years")},"›"))]))),r.table({key:"months"},r.tbody({key:"b"},this.renderMonths()))])},renderMonths:function(){for(var t,e,s,a,n,i,o,c=this.props.selectedDate,p=this.props.viewDate.month(),u=this.props.viewDate.year(),d=[],l=0,h=[],m=this.props.renderMonth||this.renderMonth,f=this.props.isValidDate||this.alwaysValidDate,v=1;l<12;)t="rdtMonth",s=this.props.viewDate.clone().set({year:u,month:l,date:v}),n=s.endOf("month").format("D"),i=Array.from({length:n},function(t,e){return e+1}),o=i.find(function(t){var e=s.clone().set("date",t);return f(e)}),a=void 0===o,a&&(t+=" rdtDisabled"),c&&l===p&&u===c.year()&&(t+=" rdtActive"),e={key:l,"data-value":l,className:t},a||(e.onClick="months"===this.props.updateOn?this.updateSelectedMonth:this.props.setDate("month")),h.push(m(e,l,u,c&&c.clone())),4===h.length&&(d.push(r.tr({key:p+"_"+d.length},h)),h=[]),l++;return d},updateSelectedMonth:function(t){this.props.updateSelectedDate(t,!0)},renderMonth:function(t,e){var s=this.props.viewDate,n=s.localeData().monthsShort(s.month(e)),i=3,o=n.substring(0,i);return r.td(t,a(o))},alwaysValidDate:function(){return 1}});t.exports=i},function(t,e,s){"use strict";var a=s(3),n=a.DOM,r=a.createClass({render:function(){var t=10*parseInt(this.props.viewDate.year()/10,10);return n.div({className:"rdtYears"},[n.table({key:"a"},n.thead({},n.tr({},[n.th({key:"prev",className:"rdtPrev"},n.span({onClick:this.props.subtractTime(10,"years")},"‹")),n.th({key:"year",className:"rdtSwitch",onClick:this.props.showView("years"),colSpan:2},t+"-"+(t+9)),n.th({key:"next",className:"rdtNext"},n.span({onClick:this.props.addTime(10,"years")},"›"))]))),n.table({key:"years"},n.tbody({},this.renderYears(t)))])},renderYears:function(t){var e,s,a,r,i,o,c,p=[],u=-1,d=[],l=this.props.renderYear||this.renderYear,h=this.props.selectedDate,m=this.props.isValidDate||this.alwaysValidDate,f=0,v=1;for(t--;u<11;)e="rdtYear",a=this.props.viewDate.clone().set({year:t,month:f,date:v}),i=a.endOf("year").format("DDD"),o=Array.from({length:i},function(t,e){return e+1}),c=o.find(function(t){var e=a.clone().dayOfYear(t);return m(e)}),r=void 0===c,r&&(e+=" rdtDisabled"),h&&h.year()===t&&(e+=" rdtActive"),s={key:t,"data-value":t,className:e},r||(s.onClick="years"===this.props.updateOn?this.updateSelectedYear:this.props.setDate("year")),p.push(l(s,t,h&&h.clone())),4===p.length&&(d.push(n.tr({key:u},p)),p=[]),t++,u++;return d},updateSelectedYear:function(t){this.props.updateSelectedDate(t,!0)},renderYear:function(t,e){return n.td(t,e)},alwaysValidDate:function(){return 1}});t.exports=r},function(t,e,s){"use strict";var a=s(3),n=s(1),r=a.DOM,i=a.createClass({getInitialState:function(){return this.calculateState(this.props)},calculateState:function(t){var e=t.selectedDate||t.viewDate,s=t.timeFormat,a=[];s.toLowerCase().indexOf("h")!==-1&&(a.push("hours"),s.indexOf("m")!==-1&&(a.push("minutes"),s.indexOf("s")!==-1&&a.push("seconds")));var n=!1;return null!==this.state&&this.props.timeFormat.toLowerCase().indexOf(" a")!==-1&&(n=this.props.timeFormat.indexOf(" A")!==-1?this.state.hours>=12?"PM":"AM":this.state.hours>=12?"pm":"am"),{hours:e.format("H"),minutes:e.format("mm"),seconds:e.format("ss"),milliseconds:e.format("SSS"),daypart:n,counters:a}},renderCounter:function(t){if("daypart"!==t){var e=this.state[t];return"hours"===t&&this.props.timeFormat.toLowerCase().indexOf(" a")!==-1&&(e=(e-1)%12+1,0===e&&(e=12)),r.div({key:t,className:"rdtCounter"},[r.span({key:"up",className:"rdtBtn",onMouseDown:this.onStartClicking("increase",t)},"▲"),r.div({key:"c",className:"rdtCount"},e),r.span({key:"do",className:"rdtBtn",onMouseDown:this.onStartClicking("decrease",t)},"▼")])}return""},renderDayPart:function(){return r.div({key:"dayPart",className:"rdtCounter"},[r.span({key:"up",className:"rdtBtn",onMouseDown:this.onStartClicking("toggleDayPart","hours")},"▲"),r.div({key:this.state.daypart,className:"rdtCount"},this.state.daypart),r.span({key:"do",className:"rdtBtn",onMouseDown:this.onStartClicking("toggleDayPart","hours")},"▼")])},render:function(){var t=this,e=[];return this.state.counters.forEach(function(s){e.length&&e.push(r.div({key:"sep"+e.length,className:"rdtCounterSeparator"},":")),e.push(t.renderCounter(s))}),this.state.daypart!==!1&&e.push(t.renderDayPart()),3===this.state.counters.length&&this.props.timeFormat.indexOf("S")!==-1&&(e.push(r.div({className:"rdtCounterSeparator",key:"sep5"},":")),e.push(r.div({className:"rdtCounter rdtMilli",key:"m"},r.input({value:this.state.milliseconds,type:"text",onChange:this.updateMilli})))),r.div({className:"rdtTime"},r.table({},[this.renderHeader(),r.tbody({key:"b"},r.tr({},r.td({},r.div({className:"rdtCounters"},e))))]))},componentWillMount:function(){var t=this;t.timeConstraints={hours:{min:0,max:23,step:1},minutes:{min:0,max:59,step:1},seconds:{min:0,max:59,step:1},milliseconds:{min:0,max:999,step:1}},["hours","minutes","seconds","milliseconds"].forEach(function(e){n(t.timeConstraints[e],t.props.timeConstraints[e])}),this.setState(this.calculateState(this.props))},componentWillReceiveProps:function(t){this.setState(this.calculateState(t))},updateMilli:function(t){var e=parseInt(t.target.value,10);e===t.target.value&&e>=0&&e<1e3&&(this.props.setTime("milliseconds",e),this.setState({milliseconds:e}))},renderHeader:function(){if(!this.props.dateFormat)return null;var t=this.props.selectedDate||this.props.viewDate;return r.thead({key:"h"},r.tr({},r.th({className:"rdtSwitch",colSpan:4,onClick:this.props.showView("days")},t.format(this.props.dateFormat))))},onStartClicking:function(t,e){var s=this;return function(){var a={};a[e]=s[t](e),s.setState(a),s.timer=setTimeout(function(){s.increaseTimer=setInterval(function(){a[e]=s[t](e),s.setState(a)},70)},500),s.mouseUpListener=function(){clearTimeout(s.timer),clearInterval(s.increaseTimer),s.props.setTime(e,s.state[e]),document.body.removeEventListener("mouseup",s.mouseUpListener)},document.body.addEventListener("mouseup",s.mouseUpListener)}},padValues:{hours:1,minutes:2,seconds:2,milliseconds:3},toggleDayPart:function(t){var e=parseInt(this.state[t],10)+12;return e>this.timeConstraints[t].max&&(e=this.timeConstraints[t].min+(e-(this.timeConstraints[t].max+1))),this.pad(t,e)},increase:function(t){var e=parseInt(this.state[t],10)+this.timeConstraints[t].step;return e>this.timeConstraints[t].max&&(e=this.timeConstraints[t].min+(e-(this.timeConstraints[t].max+1))),this.pad(t,e)},decrease:function(t){var e=parseInt(this.state[t],10)-this.timeConstraints[t].step;return e<this.timeConstraints[t].min&&(e=this.timeConstraints[t].max+1-(this.timeConstraints[t].min-e)),this.pad(t,e)},pad:function(t,e){for(var s=e+"";s.length<this.padValues[t];)s="0"+s;return s}});t.exports=i},function(t,e,s){"use strict";var a=s(3),n=a.version&&a.version.split(".");n&&(n[0]>0||n[1]>13)&&(a=s(9));var r=[],i=[],o="ignore-react-onclickoutside",c=function(t,e){return t===e||(t.correspondingElement?t.correspondingElement.classList.contains(o):t.classList.contains(o))};t.exports={componentDidMount:function(){if("function"!=typeof this.handleClickOutside)throw new Error("Component lacks a handleClickOutside(event) function for processing outside click events.");var t=this.__outsideClickHandler=function(t,e){return function(s){s.stopPropagation();for(var a=s.target,n=!1;a.parentNode;){if(n=c(a,t))return;a=a.parentNode}e(s)}}(a.findDOMNode(this),this.handleClickOutside),e=r.length;r.push(this),i[e]=t,this.props.disableOnClickOutside||this.enableOnClickOutside()},componentWillUnmount:function(){this.disableOnClickOutside(),this.__outsideClickHandler=!1;var t=r.indexOf(this);t>-1&&i[t]&&(i.splice(t,1),r.splice(t,1))},enableOnClickOutside:function(){var t=this.__outsideClickHandler;document.addEventListener("mousedown",t),document.addEventListener("touchstart",t)},disableOnClickOutside:function(){var t=this.__outsideClickHandler;document.removeEventListener("mousedown",t),document.removeEventListener("touchstart",t)}}},function(t,e){t.exports=s}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("moment"),require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["moment","React","ReactDOM"],e):"object"==typeof exports?exports.Datetime=e(require("moment"),require("React"),require("ReactDOM")):t.Datetime=e(t.moment,t.React,t.ReactDOM)}(this,function(t,e,s){return function(t){function e(a){if(s[a])return s[a].exports;var n=s[a]={exports:{},id:a,loaded:!1};return t[a].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var s={};return e.m=t,e.c=s,e.p="",e(0)}([function(t,e,s){"use strict";var a=s(1),n=s(2),r=s(3),i=s(4),o=s(5),c=s(6),l=s(7),u=r.PropTypes,d=r.createClass({mixins:[s(8)],viewComponents:{days:i,months:o,years:c,time:l},propTypes:{onFocus:u.func,onBlur:u.func,onChange:u.func,locale:u.string,utc:u.bool,input:u.bool,inputProps:u.object,timeConstraints:u.object,viewMode:u.oneOf(["years","months","days","time"]),isValidDate:u.func,open:u.bool,strictParsing:u.bool,closeOnSelect:u.bool,closeOnTab:u.bool},getDefaultProps:function(){var t=function(){};return{className:"",defaultValue:"",inputProps:{},input:!0,onFocus:t,onBlur:t,onChange:t,timeFormat:!0,timeConstraints:{},dateFormat:!0,strictParsing:!0,closeOnSelect:!1,closeOnTab:!0,utc:!1}},getInitialState:function(){var t=this.getStateFromProps(this.props);return void 0===t.open&&(t.open=!this.props.input),t.currentView=this.props.dateFormat?this.props.viewMode||t.updateOn||"days":"time",t},getStateFromProps:function(t){var e,s,a,n,r=this.getFormats(t),i=t.value||t.defaultValue;return i&&"string"==typeof i?e=this.localMoment(i,r.datetime):i&&(e=this.localMoment(i)),e&&!e.isValid()&&(e=null),s=e?e.clone().startOf("month"):this.localMoment().startOf("month"),a=this.getUpdateOn(r),n=e?e.format(r.datetime):i.isValid&&!i.isValid()?"":i||"",{updateOn:a,inputFormat:r.datetime,viewDate:s,selectedDate:e,inputValue:n,open:t.open}},getUpdateOn:function(t){return t.date.match(/[lLD]/)?"days":t.date.indexOf("M")!==-1?"months":t.date.indexOf("Y")!==-1?"years":"days"},getFormats:function(t){var e={date:t.dateFormat||"",time:t.timeFormat||""},s=this.localMoment(t.date,null,t).localeData();return e.date===!0?e.date=s.longDateFormat("L"):"days"!==this.getUpdateOn(e)&&(e.time=""),e.time===!0&&(e.time=s.longDateFormat("LT")),e.datetime=e.date&&e.time?e.date+" "+e.time:e.date||e.time,e},componentWillReceiveProps:function(t){var e=this.getFormats(t),s={};if(t.value===this.props.value&&e.datetime===this.getFormats(this.props).datetime||(s=this.getStateFromProps(t)),void 0===s.open&&(s.open=this.state.open),this.props.closeOnSelect===!1&&(s.open=!0),t.viewMode!==this.props.viewMode&&(s.currentView=t.viewMode),t.locale!==this.props.locale){if(this.state.viewDate){var a=this.state.viewDate.clone().locale(t.locale);s.viewDate=a}if(this.state.selectedDate){var n=this.state.selectedDate.clone().locale(t.locale);s.selectedDate=n,s.inputValue=n.format(e.datetime)}}t.utc!==this.props.utc&&(t.utc?(this.state.viewDate&&(s.viewDate=this.state.viewDate.clone().utc()),this.state.selectedDate&&(s.selectedDate=this.state.selectedDate.clone().utc(),s.inputValue=s.selectedDate.format(e.datetime))):(this.state.viewDate&&(s.viewDate=this.state.viewDate.clone().local()),this.state.selectedDate&&(s.selectedDate=this.state.selectedDate.clone().local(),s.inputValue=s.selectedDate.format(e.datetime)))),this.setState(s)},onInputChange:function(t){var e=null===t.target?t:t.target.value,s=this.localMoment(e,this.state.inputFormat),a={inputValue:e};return s.isValid()&&!this.props.value?(a.selectedDate=s,a.viewDate=s.clone().startOf("month")):a.selectedDate=null,this.setState(a,function(){return this.props.onChange(s.isValid()?s:this.state.inputValue)})},onInputKey:function(t){9===t.which&&this.props.closeOnTab&&this.closeCalendar()},showView:function(t){var e=this;return function(){e.setState({currentView:t})}},setDate:function(t){var e=this,s={month:"days",year:"months"};return function(a){e.setState({viewDate:e.state.viewDate.clone()[t](parseInt(a.target.getAttribute("data-value"),10)).startOf(t),currentView:s[t]})}},addTime:function(t,e,s){return this.updateTime("add",t,e,s)},subtractTime:function(t,e,s){return this.updateTime("subtract",t,e,s)},updateTime:function(t,e,s,a){var n=this;return function(){var r={},i=a?"selectedDate":"viewDate";r[i]=n.state[i].clone()[t](e,s),n.setState(r)}},allowedSetTime:["hours","minutes","seconds","milliseconds"],setTime:function(t,e){var s,a=this.allowedSetTime.indexOf(t)+1,n=this.state,r=(n.selectedDate||n.viewDate).clone();for(r[t](e);a<this.allowedSetTime.length;a++)s=this.allowedSetTime[a],r[s](r[s]());this.props.value||this.setState({selectedDate:r,inputValue:r.format(n.inputFormat)}),this.props.onChange(r)},updateSelectedDate:function(t,e){var s,a=t.target,n=0,r=this.state.viewDate,i=this.state.selectedDate||r;a.className.indexOf("rdtDay")!==-1?(a.className.indexOf("rdtNew")!==-1?n=1:a.className.indexOf("rdtOld")!==-1&&(n=-1),s=r.clone().month(r.month()+n).date(parseInt(a.getAttribute("data-value"),10))):a.className.indexOf("rdtMonth")!==-1?s=r.clone().month(parseInt(a.getAttribute("data-value"),10)).date(i.date()):a.className.indexOf("rdtYear")!==-1&&(s=r.clone().month(i.month()).date(i.date()).year(parseInt(a.getAttribute("data-value"),10))),s.hours(i.hours()).minutes(i.minutes()).seconds(i.seconds()).milliseconds(i.milliseconds()),this.props.value?this.props.closeOnSelect&&e&&this.closeCalendar():this.setState({selectedDate:s,viewDate:s.clone().startOf("month"),inputValue:s.format(this.state.inputFormat),open:!(this.props.closeOnSelect&&e)}),this.props.onChange(s)},openCalendar:function(){this.state.open||this.setState({open:!0},function(){this.props.onFocus()})},closeCalendar:function(){this.setState({open:!1},function(){this.props.onBlur(this.state.selectedDate||this.state.inputValue)})},handleClickOutside:function(){this.props.input&&this.state.open&&!this.props.open&&this.setState({open:!1},function(){this.props.onBlur(this.state.selectedDate||this.state.inputValue)})},localMoment:function(t,e,s){s=s||this.props;var a=s.utc?n.utc:n,r=a(t,e,s.strictParsing);return s.locale&&r.locale(s.locale),r},componentProps:{fromProps:["value","isValidDate","renderDay","renderMonth","renderYear","timeConstraints"],fromState:["viewDate","selectedDate","updateOn"],fromThis:["setDate","setTime","showView","addTime","subtractTime","updateSelectedDate","localMoment"]},getComponentProps:function(){var t=this,e=this.getFormats(this.props),s={dateFormat:e.date,timeFormat:e.time};return this.componentProps.fromProps.forEach(function(e){s[e]=t.props[e]}),this.componentProps.fromState.forEach(function(e){s[e]=t.state[e]}),this.componentProps.fromThis.forEach(function(e){s[e]=t[e]}),s},render:function(){var t=this.viewComponents[this.state.currentView],e=r.DOM,s="rdt"+(this.props.className?Array.isArray(this.props.className)?" "+this.props.className.join(" "):" "+this.props.className:""),n=[];return this.props.input?n=[e.input(a({key:"i",type:"text",className:"form-control",onFocus:this.openCalendar,onChange:this.onInputChange,onKeyDown:this.onInputKey,value:this.state.inputValue},this.props.inputProps))]:s+=" rdtStatic",this.state.open&&(s+=" rdtOpen"),e.div({className:s},n.concat(e.div({key:"dt",className:"rdtPicker"},r.createElement(t,this.getComponentProps()))))}});d.moment=n,t.exports=d},function(t,e){"use strict";function s(t){if(null==t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}function a(t){var e=Object.getOwnPropertyNames(t);return Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(t))),e.filter(function(e){return n.call(t,e)})}var n=Object.prototype.propertyIsEnumerable;t.exports=Object.assign||function(t,e){for(var n,r,i=s(t),o=1;o<arguments.length;o++){n=arguments[o],r=a(Object(n));for(var c=0;c<r.length;c++)i[r[c]]=n[r[c]]}return i}},function(e,s){e.exports=t},function(t,s){t.exports=e},function(t,e,s){"use strict";var a=s(3),n=s(2),r=a.DOM,i=a.createClass({render:function(){var t,e=this.renderFooter(),s=this.props.viewDate,a=s.localeData();return t=[r.thead({key:"th"},[r.tr({key:"h"},[r.th({key:"p",className:"rdtPrev"},r.span({onClick:this.props.subtractTime(1,"months")},"‹")),r.th({key:"s",className:"rdtSwitch",onClick:this.props.showView("months"),colSpan:5,"data-value":this.props.viewDate.month()},a.months(s)+" "+s.year()),r.th({key:"n",className:"rdtNext"},r.span({onClick:this.props.addTime(1,"months")},"›"))]),r.tr({key:"d"},this.getDaysOfWeek(a).map(function(t,e){return r.th({key:t+e,className:"dow"},t)}))]),r.tbody({key:"tb"},this.renderDays())],e&&t.push(e),r.div({className:"rdtDays"},r.table({},t))},getDaysOfWeek:function(t){var e=t._weekdaysMin,s=t.firstDayOfWeek(),a=[],n=0;return e.forEach(function(t){a[(7+n++-s)%7]=t}),a},renderDays:function(){var t,e,s,a,i=this.props.viewDate,o=this.props.selectedDate&&this.props.selectedDate.clone(),c=i.clone().subtract(1,"months"),l=i.year(),u=i.month(),d=[],p=[],h=this.props.renderDay||this.renderDay,m=this.props.isValidDate||this.alwaysValidDate;c.date(c.daysInMonth()).startOf("week");for(var f=c.clone().add(42,"d");c.isBefore(f);)t="rdtDay",a=c.clone(),c.year()===l&&c.month()<u||c.year()<l?t+=" rdtOld":(c.year()===l&&c.month()>u||c.year()>l)&&(t+=" rdtNew"),o&&c.isSame(o,"day")&&(t+=" rdtActive"),c.isSame(n(),"day")&&(t+=" rdtToday"),e=!m(a,o),e&&(t+=" rdtDisabled"),s={key:c.format("M_D"),"data-value":c.date(),className:t},e||(s.onClick=this.updateSelectedDate),p.push(h(s,a,o)),7===p.length&&(d.push(r.tr({key:c.format("M_D")},p)),p=[]),c.add(1,"d");return d},updateSelectedDate:function(t){this.props.updateSelectedDate(t,!0)},renderDay:function(t,e){return r.td(t,e.date())},renderFooter:function(){if(!this.props.timeFormat)return"";var t=this.props.selectedDate||this.props.viewDate;return r.tfoot({key:"tf"},r.tr({},r.td({onClick:this.props.showView("time"),colSpan:7,className:"rdtTimeToggle"},t.format(this.props.timeFormat))))},alwaysValidDate:function(){return 1}});t.exports=i},function(t,e,s){"use strict";function a(t){return t.charAt(0).toUpperCase()+t.slice(1)}var n=s(3),r=n.DOM,i=n.createClass({render:function(){return r.div({className:"rdtMonths"},[r.table({key:"a"},r.thead({},r.tr({},[r.th({key:"prev",className:"rdtPrev"},r.span({onClick:this.props.subtractTime(1,"years")},"‹")),r.th({key:"year",className:"rdtSwitch",onClick:this.props.showView("years"),colSpan:2,"data-value":this.props.viewDate.year()},this.props.viewDate.year()),r.th({key:"next",className:"rdtNext"},r.span({onClick:this.props.addTime(1,"years")},"›"))]))),r.table({key:"months"},r.tbody({key:"b"},this.renderMonths()))])},renderMonths:function(){for(var t,e,s,a,n,i,o,c=this.props.selectedDate,l=this.props.viewDate.month(),u=this.props.viewDate.year(),d=[],p=0,h=[],m=this.props.renderMonth||this.renderMonth,f=this.props.isValidDate||this.alwaysValidDate,v=1;p<12;)t="rdtMonth",s=this.props.viewDate.clone().set({year:u,month:p,date:v}),n=s.endOf("month").format("D"),i=Array.from({length:n},function(t,e){return e+1}),o=i.find(function(t){var e=s.clone().set("date",t);return f(e)}),a=void 0===o,a&&(t+=" rdtDisabled"),c&&p===l&&u===c.year()&&(t+=" rdtActive"),e={key:p,"data-value":p,className:t},a||(e.onClick="months"===this.props.updateOn?this.updateSelectedMonth:this.props.setDate("month")),h.push(m(e,p,u,c&&c.clone())),4===h.length&&(d.push(r.tr({key:l+"_"+d.length},h)),h=[]),p++;return d},updateSelectedMonth:function(t){this.props.updateSelectedDate(t,!0)},renderMonth:function(t,e){var s=this.props.viewDate,n=s.localeData().monthsShort(s.month(e)),i=3,o=n.substring(0,i);return r.td(t,a(o))},alwaysValidDate:function(){return 1}});t.exports=i},function(t,e,s){"use strict";var a=s(3),n=a.DOM,r=a.createClass({render:function(){var t=10*parseInt(this.props.viewDate.year()/10,10);return n.div({className:"rdtYears"},[n.table({key:"a"},n.thead({},n.tr({},[n.th({key:"prev",className:"rdtPrev"},n.span({onClick:this.props.subtractTime(10,"years")},"‹")),n.th({key:"year",className:"rdtSwitch",onClick:this.props.showView("years"),colSpan:2},t+"-"+(t+9)),n.th({key:"next",className:"rdtNext"},n.span({onClick:this.props.addTime(10,"years")},"›"))]))),n.table({key:"years"},n.tbody({},this.renderYears(t)))])},renderYears:function(t){var e,s,a,r,i,o,c,l=[],u=-1,d=[],p=this.props.renderYear||this.renderYear,h=this.props.selectedDate,m=this.props.isValidDate||this.alwaysValidDate,f=0,v=1;for(t--;u<11;)e="rdtYear",a=this.props.viewDate.clone().set({year:t,month:f,date:v}),i=a.endOf("year").format("DDD"),o=Array.from({length:i},function(t,e){return e+1}),c=o.find(function(t){var e=a.clone().dayOfYear(t);return m(e)}),r=void 0===c,r&&(e+=" rdtDisabled"),h&&h.year()===t&&(e+=" rdtActive"),s={key:t,"data-value":t,className:e},r||(s.onClick="years"===this.props.updateOn?this.updateSelectedYear:this.props.setDate("year")),l.push(p(s,t,h&&h.clone())),4===l.length&&(d.push(n.tr({key:u},l)),l=[]),t++,u++;return d},updateSelectedYear:function(t){this.props.updateSelectedDate(t,!0)},renderYear:function(t,e){return n.td(t,e)},alwaysValidDate:function(){return 1}});t.exports=r},function(t,e,s){"use strict";var a=s(3),n=s(1),r=a.DOM,i=a.createClass({getInitialState:function(){return this.calculateState(this.props)},calculateState:function(t){var e=t.selectedDate||t.viewDate,s=t.timeFormat,a=[];s.toLowerCase().indexOf("h")!==-1&&(a.push("hours"),s.indexOf("m")!==-1&&(a.push("minutes"),s.indexOf("s")!==-1&&a.push("seconds")));var n=!1;return null!==this.state&&this.props.timeFormat.toLowerCase().indexOf(" a")!==-1&&(n=this.props.timeFormat.indexOf(" A")!==-1?this.state.hours>=12?"PM":"AM":this.state.hours>=12?"pm":"am"),{hours:e.format("H"),minutes:e.format("mm"),seconds:e.format("ss"),milliseconds:e.format("SSS"),daypart:n,counters:a}},renderCounter:function(t){if("daypart"!==t){var e=this.state[t];return"hours"===t&&this.props.timeFormat.toLowerCase().indexOf(" a")!==-1&&(e=(e-1)%12+1,0===e&&(e=12)),r.div({key:t,className:"rdtCounter"},[r.span({key:"up",className:"rdtBtn",onMouseDown:this.onStartClicking("increase",t)},"▲"),r.div({key:"c",className:"rdtCount"},e),r.span({key:"do",className:"rdtBtn",onMouseDown:this.onStartClicking("decrease",t)},"▼")])}return""},renderDayPart:function(){return r.div({key:"dayPart",className:"rdtCounter"},[r.span({key:"up",className:"rdtBtn",onMouseDown:this.onStartClicking("toggleDayPart","hours")},"▲"),r.div({key:this.state.daypart,className:"rdtCount"},this.state.daypart),r.span({key:"do",className:"rdtBtn",onMouseDown:this.onStartClicking("toggleDayPart","hours")},"▼")])},render:function(){var t=this,e=[];return this.state.counters.forEach(function(s){e.length&&e.push(r.div({key:"sep"+e.length,className:"rdtCounterSeparator"},":")),e.push(t.renderCounter(s))}),this.state.daypart!==!1&&e.push(t.renderDayPart()),3===this.state.counters.length&&this.props.timeFormat.indexOf("S")!==-1&&(e.push(r.div({className:"rdtCounterSeparator",key:"sep5"},":")),e.push(r.div({className:"rdtCounter rdtMilli",key:"m"},r.input({value:this.state.milliseconds,type:"text",onChange:this.updateMilli})))),r.div({className:"rdtTime"},r.table({},[this.renderHeader(),r.tbody({key:"b"},r.tr({},r.td({},r.div({className:"rdtCounters"},e))))]))},componentWillMount:function(){var t=this;t.timeConstraints={hours:{min:0,max:23,step:1},minutes:{min:0,max:59,step:1},seconds:{min:0,max:59,step:1},milliseconds:{min:0,max:999,step:1}},["hours","minutes","seconds","milliseconds"].forEach(function(e){n(t.timeConstraints[e],t.props.timeConstraints[e])}),this.setState(this.calculateState(this.props))},componentWillReceiveProps:function(t){this.setState(this.calculateState(t))},updateMilli:function(t){var e=parseInt(t.target.value,10);e===t.target.value&&e>=0&&e<1e3&&(this.props.setTime("milliseconds",e),this.setState({milliseconds:e}))},renderHeader:function(){if(!this.props.dateFormat)return null;var t=this.props.selectedDate||this.props.viewDate;return r.thead({key:"h"},r.tr({},r.th({className:"rdtSwitch",colSpan:4,onClick:this.props.showView("days")},t.format(this.props.dateFormat))))},onStartClicking:function(t,e){var s=this;return function(){var a={};a[e]=s[t](e),s.setState(a),s.timer=setTimeout(function(){s.increaseTimer=setInterval(function(){a[e]=s[t](e),s.setState(a)},70)},500),s.mouseUpListener=function(){clearTimeout(s.timer),clearInterval(s.increaseTimer),s.props.setTime(e,s.state[e]),document.body.removeEventListener("mouseup",s.mouseUpListener)},document.body.addEventListener("mouseup",s.mouseUpListener)}},padValues:{hours:1,minutes:2,seconds:2,milliseconds:3},toggleDayPart:function(t){var e=parseInt(this.state[t],10)+12;return e>this.timeConstraints[t].max&&(e=this.timeConstraints[t].min+(e-(this.timeConstraints[t].max+1))),this.pad(t,e)},increase:function(t){var e=parseInt(this.state[t],10)+this.timeConstraints[t].step;return e>this.timeConstraints[t].max&&(e=this.timeConstraints[t].min+(e-(this.timeConstraints[t].max+1))),this.pad(t,e)},decrease:function(t){var e=parseInt(this.state[t],10)-this.timeConstraints[t].step;return e<this.timeConstraints[t].min&&(e=this.timeConstraints[t].max+1-(this.timeConstraints[t].min-e)),this.pad(t,e)},pad:function(t,e){for(var s=e+"";s.length<this.padValues[t];)s="0"+s;return s}});t.exports=i},function(t,e,s){"use strict";var a=s(3),n=a.version&&a.version.split(".");n&&(n[0]>0||n[1]>13)&&(a=s(9));var r=[],i=[],o="ignore-react-onclickoutside",c=function(t,e){return t===e||(t.correspondingElement?t.correspondingElement.classList.contains(o):t.classList.contains(o))};t.exports={componentDidMount:function(){if("function"!=typeof this.handleClickOutside)throw new Error("Component lacks a handleClickOutside(event) function for processing outside click events.");var t=this.__outsideClickHandler=function(t,e){return function(s){s.stopPropagation();for(var a=s.target,n=!1;a.parentNode;){if(n=c(a,t))return;a=a.parentNode}e(s)}}(a.findDOMNode(this),this.handleClickOutside),e=r.length;r.push(this),i[e]=t,this.props.disableOnClickOutside||this.enableOnClickOutside()},componentWillUnmount:function(){this.disableOnClickOutside(),this.__outsideClickHandler=!1;var t=r.indexOf(this);t>-1&&i[t]&&(i.splice(t,1),r.splice(t,1))},enableOnClickOutside:function(){var t=this.__outsideClickHandler;document.addEventListener("mousedown",t),document.addEventListener("touchstart",t)},disableOnClickOutside:function(){var t=this.__outsideClickHandler;document.removeEventListener("mousedown",t),document.removeEventListener("touchstart",t)}}},function(t,e){t.exports=s}])});
+//# sourceMappingURL=react-datetime.min.js.map

package.json

 {
   "name": "react-datetime",
-  "version": "2.8.4",
+  "version": "2.8.5",
   "description": "A lightweight but complete datetime picker React.js component.",
-  "homepage": "https://github.com/arqex/react-datetime",
+  "homepage": "https://github.com/YouCanBookMe/react-datetime",
   "repository": {
     "type": "git",
-    "url": "https://github.com/arqex/react-datetime"
+    "url": "https://github.com/YouCanBookMe/react-datetime"
   },
@@ -25,6 +25,6 @@ "main": "./DateTime.js",
     "lint": "./node_modules/.bin/eslint src/ DateTime.js",
-    "test": "node node_modules/mocha/bin/mocha tests",
+    "test": "./node_modules/.bin/jest",
     "test:all": "npm run test:typings && npm run test",
     "test:typings": "./node_modules/.bin/tsc -p ./typings",
-    "test:watch": "node node_modules/mocha/bin/mocha --watch tests"
+    "test:watch": "./node_modules/.bin/jest --watch"
   },
@@ -48,9 +48,21 @@ "keywords": [
     "@types/react": "^0.14.49",
+    "babel-core": "^6.22.1",
+    "babel-jest": "^18.0.0",
+    "babel-loader": "^6.2.1",
+    "babel-plugin-transform-remove-strict-mode": "0.0.2",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-react": "^6.22.0",
+    "enzyme": "^2.7.1",
     "eslint": "^3.1.0",
     "gulp": "^3.9.0",
+    "gulp-babel": "^6.1",
     "gulp-insert": "^0.4.0",
+    "gulp-plumber": "^1.1.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-sourcemaps": "^2.4.0",
     "gulp-uglify": "^1.2.0",
-    "gulp-webpack": "^1.5.0",
+    "jest": "^18.1.0",
+    "jest-cli": "^18.1.0",
     "jsdom": "^7.0.2",
-    "mocha": "^2.2.5",
+    "mocha": "^3.2.0",
     "moment": ">=2.16.0",
@@ -61,6 +73,8 @@ "pre-commit": "^1.1.3",
     "react-dom": ">=0.13",
-    "react-tools": "^0.13.2",
+    "react-test-renderer": "^15.4.2",
+    "through2": "^2.0.3",
     "typescript": "^2.0.10",
-    "webpack": "^1.5.1",
-    "webpack-dev-server": "^1.7.0"
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^1.7.0",
+    "webpack-stream": "^3.2.0"
   },
@@ -67,0 +81,0 @@ "dependencies": {

README.md

@@ -14,3 +14,3 @@ # react-datetime
 Install using npm:
-```
+```sh
 npm install --save react-datetime
@@ -33,3 +33,3 @@ ```
 
-**Don't forget to add the [CSS stylesheet](https://github.com/arqex/react-datetime/blob/master/css/react-datetime.css) to make it work out of the box.**
+**Don't forget to add the [CSS stylesheet](https://github.com/YouCanBookMe/react-datetime/blob/master/css/react-datetime.css) to make it work out of the box.**
 
@@ -53,3 +53,3 @@ ## API
 | **className** | `string` or `string array` | `''` | Extra class name for the outermost markup element. |
-| **inputProps** | `object` | `undefined` | Defines additional attributes for the input element of the component. For example: `placeholder`, `disabled`, `required` and `name`. |
+| **inputProps** | `object` | `undefined` | Defines additional attributes for the input element of the component. For example: `placeholder`, `disabled`, `required`, `name` and `className` (`className` *sets* the class attribute for the input element). |
 | **isValidDate** | `function` | `() => true` | Define the dates that can be selected. The function receives `(currentDate, selectedDate)` and shall return a `true` or `false` whether the `currentDate` is valid or not. See [selectable dates](#selectable-dates).|
@@ -81,3 +81,3 @@ | **renderDay** | `function` | `DOM.td(day)` | Customize the way that the days are shown in the daypicker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, and must return a React component. See [appearance customization](#appearance-customization). |
 
-## Appearance customization
+## Customize the Appearance
 It is possible to customize the way that the datepicker display the days, months and years in the calendar. To adapt the calendar for every need it is possible to use the props `renderDay(props, currentDate, selectedDate)`, `renderMonth(props, month, year, selectedDate)` and `renderYear(props, year, selectedDate)` to customize the output of each rendering method.
@@ -107,3 +107,3 @@
 
-#### Method parameters
+#### Method Parameters
 * `props` is the object that the datepicker has calculated for this object. It is convenient to use this object as the `props` for your custom component, since it knows how to handle the click event and its `className` attribute is used by the default styles.
@@ -113,3 +113,3 @@ * `selectedDate` and `currentDate` are [moment objects](http://momentjs.com) and can be used to change the output depending on the selected date, or the date for the current day.
 
-## Selectable dates
+## Selectable Dates
 It is possible to disable dates in the calendar if the user are not allowed to select them, e.g. dates in the past. This is done using the prop `isValidDate`, which admits a function in the form `function(currentDate, selectedDate)` where both arguments are [moment objects](http://momentjs.com). The function shall return `true` for selectable dates, and `false` for disabled ones.
@@ -146,3 +146,3 @@
 ```js
-import * as Datetime  from 'react-datetime';
+import * as Datetime from 'react-datetime';
 
@@ -157,7 +157,14 @@ class MyDTPicker extends React.Component<MyDTPickerProps, MyDTPickerState> {
 ## Contributions
-* For information about how to contribute, see the [CONTRIBUTING](CONTRIBUTING.md) file.
-* For development we recommend that you use [react-datetime-playground](https://github.com/arqex/react-datetime-playground).
+* For information about how to contribute, see the [CONTRIBUTING](.github/CONTRIBUTING.md) file.
 
+## Development
+```sh
+npm run dev
+```
+This will start a local `webpack-dev-server` based on `example/example.js` where most development can be done.
+
+If you want to develop using the component inside a React application, we recommend that you use [react-datetime-playground](https://github.com/arqex/react-datetime-playground).
+
 ### [Changelog](CHANGELOG.md)
 
 ### [MIT Licensed](LICENSE)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

221471

increased by84.45%

Number of package files

16

increased by6.67%

Lines of code

2547

increased by59.19%

Number of lines in readme file

163

increased by4.49%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

31

increased by82.35%

No dependency changes