react-datetime - npm Package Compare versions

Comparing version 0.5.0 to 1.0.0-rc.1

DateTime.js

@@ -26,3 +26,4 @@ 'use strict';
 	propTypes: {
-		date: TYPES.object,
+		value: TYPES.object,
+		defaultValue: TYPES.object,
 		onBlur: TYPES.func,
@@ -32,14 +33,17 @@ onChange: TYPES.func,
 		input: TYPES.bool,
-		dateFormat: TYPES.string,
-		timeFormat: TYPES.string,
+		// dateFormat: TYPES.string | TYPES.bool,
+		// timeFormat: TYPES.string | TYPES.bool,
 		inputProps: TYPES.object,
 		viewMode: TYPES.oneOf(['years', 'months', 'days', 'time']),
+		isValidDate: TYPES.func,
 		minDate: TYPES.object,
 		maxDate: TYPES.object
 	},
+
 	getDefaultProps: function() {
 		var nof = function(){};
 		return {
-			className: 'form-control',
-			date: new Date(),
+			className: '',
+			value: false,
+			defaultValue: new Date(),
 			viewMode: 'days',
@@ -49,12 +53,29 @@ inputProps: {},
 			onBlur: nof,
-			onChange: nof
+			onChange: nof,
+			timeFormat: true,
+			dateFormat: true
 		};
 	},
+
 	getInitialState: function() {
-		var formats = this.getFormats( this.props ),
-			date = this.props.date
+		var state = this.getStateFromProps( this.props );
+
+		state.open = !this.props.input;
+		state.currentView = this.props.viewMode;
+
+		return state;
+	},
+
+	getStateFromProps: function( props ){
+		var formats = this.getFormats( props ),
+			date = props.value || props.defaultValue,
+			selectedDate
 		;
+
+		if( typeof date == 'string')
+			selectedDate = this.localMoment( date, formats.datetime );
+		else
+			selectedDate = this.localMoment( date );
+
 		return {
-			currentView: this.props.viewMode,
-			open: !this.props.input,
 			inputFormat: formats.datetime,
@@ -69,5 +90,4 @@ viewDate: this.localMoment(date).startOf("month"),
 		var formats = {
-				date: '',
-				time: '',
-				datetime: ''
+				date: props.dateFormat || '',
+				time: props.timeFormat || ''
 			},
@@ -77,27 +97,11 @@ locale = this.localMoment( props.date ).localeData()
 
-		if( props.dateFormat ){
-			formats.date = props.dateFormat;
+		if( formats.date === true ){
+			formats.date = locale.longDateFormat('L');
 		}
-		if( props.timeFormat ){
-			formats.time = props.timeFormat;
-		}
-
-		if( !formats.date && !formats.time ){
-			formats.date = locale.longDateFormat('L');
+		if( formats.time === true ){
 			formats.time = locale.longDateFormat('LT');
-			formats.datetime = formats.date + ' ' + formats.time;
 		}
-		else {
-			if( props.dateFormat ){
-				formats.date = props.dateFormat;
-				formats.datetime = formats.date;
-			}
-			if( props.timeFormat ){
-				if( formats.date )
-					formats.datetime += ' ';
-				formats.time = props.timeFormat;
-				formats.datetime += formats.time;
-			}
-		}
 
+		formats.datetime = formats.date + ' ' + formats.time;
+
 		return formats;
@@ -107,26 +111,30 @@ },
 	componentWillReceiveProps: function(nextProps) {
-		var formats = this.getFormats( nextProps );
-		if ( formats.datetime !== this.getFormats(this.props).datetime ) {
-			return this.setState({
-				inputFormat: nextProps.inputFormat
-			});
+		var formats = this.getFormats( nextProps ),
+			update = {}
+		;
+
+		if( nextProps.value ){
+			update = this.getStateFromProps( nextProps );
 		}
+		if ( formats.datetime !== this.getFormats( this.props ).datetime ) {
+			update.inputFormat = formats.datetime;
+		}
+
+		this.setState( update );
 	},
 
-	onChange: function(event) {
-		var value = event.target == null ? event : event.target.value,
-			localMoment = this.localMoment( value )
+	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.setState({
-				selectedDate: localMoment,
-				viewDate: localMoment.clone().startOf("month")
-			});
+		if ( localMoment.isValid() && !this.props.value ) {
+			update.selectedDate = localMoment;
+			update.viewDate = localMoment.clone().startOf("month");
 		}
 
-		return this.setState({
-			inputValue: value
-		}, function() {
-			return this.props.onChange( localMoment );
+		return this.setState( update, function() {
+			if( localMoment.isValid() )
+				return this.props.onChange( localMoment );
 		});
@@ -194,11 +202,12 @@ },
 
-		this.setState({
-			selectedDate: date,
-			inputValue: date.format( this.state.inputFormat )
-		});
-
+		if( !this.props.value ){
+			this.setState({
+				selectedDate: date,
+				inputValue: date.format( this.state.inputFormat )
+			});
+		}
 		this.props.onChange( date );
 	},
 
-	updateDate: function( e ) {
+	updateSelectedDate: function( e ) {
 		var target = e.target,
@@ -224,7 +233,9 @@ modifier = 0,
 
-		this.setState({
-			selectedDate: date,
-			viewDate: date.clone().startOf('month'),
-			inputValue: date.format( this.state.inputFormat )
-		});
+		if( !this.props.value ){
+			this.setState({
+				selectedDate: date,
+				viewDate: date.clone().startOf('month'),
+				inputValue: date.format( this.state.inputFormat )
+			});
+		}
 
@@ -244,4 +255,4 @@ this.props.onChange( date );
 
-	localMoment: function( date ){
-		var m = moment( date );
+	localMoment: function( date, format ){
+		var m = moment( date, format );
 		if( this.props.locale )
@@ -253,5 +264,5 @@ m.locale( this.props.locale );
 	componentProps: {
-		fromProps: ['viewMode', 'minDate', 'maxDate', 'renderDay', 'renderMonth', 'renderYear'],
+		fromProps: ['value', 'isValidDate', 'renderDay', 'renderMonth', 'renderYear'],
 		fromState: ['viewDate', 'selectedDate' ],
-		fromThis: ['setDate', 'setTime', 'showView', 'addTime', 'subtractTime', 'updateDate', 'localMoment']
+		fromThis: ['setDate', 'setTime', 'showView', 'addTime', 'subtractTime', 'updateSelectedDate', 'localMoment']
 	},
@@ -281,3 +292,3 @@
 			DOM = React.DOM,
-			className = 'rdt',
+			className = 'rdt ' + this.props.className,
 			children = []
@@ -290,5 +301,5 @@ ;
 				type:'text',
-				className: 'form-control', 
+				className: 'form-control',
 				onFocus: this.openCalendar,
-				onChange: this.onChange,
+				onChange: this.onInputChange,
 				value: this.state.inputValue
@@ -295,0 +306,0 @@ }, this.props.inputProps ))];

dist/react-datetime.js

 /*
-react-datetime v0.5.0
+react-datetime v1.0.0-rc.1
 https://github.com/arqex/react-datetime
@@ -62,3 +62,3 @@ MIT: https://github.com/arqex/react-datetime/raw/master/LICENSE
 
-	eval("'use strict';\r\n\r\n__webpack_require__(1);\r\n\r\nvar assign = __webpack_require__(2),\r\n\tReact = __webpack_require__(3),\r\n\tDaysView = __webpack_require__(4),\r\n\tMonthsView = __webpack_require__(6),\r\n\tYearsView = __webpack_require__(7),\r\n\tTimeView = __webpack_require__(8),\r\n\tmoment = __webpack_require__(5)\r\n;\r\n\r\nvar TYPES = React.PropTypes;\r\nvar Datetime = React.createClass({\r\n\tmixins: [\r\n\t\t__webpack_require__(9)\r\n\t],\r\n\tviewComponents: {\r\n\t\tdays: DaysView,\r\n\t\tmonths: MonthsView,\r\n\t\tyears: YearsView,\r\n\t\ttime: TimeView\r\n\t},\r\n\tpropTypes: {\r\n\t\tdate: TYPES.object,\r\n\t\tonBlur: TYPES.func,\r\n\t\tonChange: TYPES.func,\r\n\t\tlocale: TYPES.string,\r\n\t\tinput: TYPES.bool,\r\n\t\tdateFormat: TYPES.string,\r\n\t\ttimeFormat: TYPES.string,\r\n\t\tinputProps: TYPES.object,\r\n\t\tviewMode: TYPES.oneOf(['years', 'months', 'days', 'time']),\r\n\t\tminDate: TYPES.object,\r\n\t\tmaxDate: TYPES.object\r\n\t},\r\n\tgetDefaultProps: function() {\r\n\t\tvar nof = function(){};\r\n\t\treturn {\r\n\t\t\tclassName: 'form-control',\r\n\t\t\tdate: new Date(),\r\n\t\t\tviewMode: 'days',\r\n\t\t\tinputProps: {},\r\n\t\t\tinput: true,\r\n\t\t\tonBlur: nof,\r\n\t\t\tonChange: nof\r\n\t\t};\r\n\t},\r\n\tgetInitialState: function() {\r\n\t\tvar formats = this.getFormats( this.props ),\r\n\t\t\tdate = this.props.date\r\n\t\t;\r\n\t\treturn {\r\n\t\t\tcurrentView: this.props.viewMode,\r\n\t\t\topen: !this.props.input,\r\n\t\t\tinputFormat: formats.datetime,\r\n\t\t\tviewDate: this.localMoment(date).startOf(\"month\"),\r\n\t\t\tselectedDate: this.localMoment(date),\r\n\t\t\tinputValue: this.localMoment(date).format( formats.datetime )\r\n\t\t};\r\n\t},\r\n\r\n\tgetFormats: function( props ){\r\n\t\tvar formats = {\r\n\t\t\t\tdate: '',\r\n\t\t\t\ttime: '',\r\n\t\t\t\tdatetime: ''\r\n\t\t\t},\r\n\t\t\tlocale = this.localMoment( props.date ).localeData()\r\n\t\t;\r\n\r\n\t\tif( props.dateFormat ){\r\n\t\t\tformats.date = props.dateFormat;\r\n\t\t}\r\n\t\tif( props.timeFormat ){\r\n\t\t\tformats.time = props.timeFormat;\r\n\t\t}\r\n\r\n\t\tif( !formats.date && !formats.time ){\r\n\t\t\tformats.date = locale.longDateFormat('L');\r\n\t\t\tformats.time = locale.longDateFormat('LT');\r\n\t\t\tformats.datetime = formats.date + ' ' + formats.time;\r\n\t\t}\r\n\t\telse {\r\n\t\t\tif( props.dateFormat ){\r\n\t\t\t\tformats.date = props.dateFormat;\r\n\t\t\t\tformats.datetime = formats.date;\r\n\t\t\t}\r\n\t\t\tif( props.timeFormat ){\r\n\t\t\t\tif( formats.date )\r\n\t\t\t\t\tformats.datetime += ' ';\r\n\t\t\t\tformats.time = props.timeFormat;\r\n\t\t\t\tformats.datetime += formats.time;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn formats;\r\n\t},\r\n\r\n\tcomponentWillReceiveProps: function(nextProps) {\r\n\t\tvar formats = this.getFormats( nextProps );\r\n\t\tif ( formats.datetime !== this.getFormats(this.props).datetime ) {\r\n\t\t\treturn this.setState({\r\n\t\t\t\tinputFormat: nextProps.inputFormat\r\n\t\t\t});\r\n\t\t}\r\n\t},\r\n\r\n\tonChange: function(event) {\r\n\t\tvar value = event.target == null ? event : event.target.value,\r\n\t\t\tlocalMoment = this.localMoment( value )\r\n\t\t;\r\n\r\n\t\tif (localMoment.isValid()) {\r\n\t\t\tthis.setState({\r\n\t\t\t\tselectedDate: localMoment,\r\n\t\t\t\tviewDate: localMoment.clone().startOf(\"month\")\r\n\t\t\t});\r\n\t\t}\r\n\r\n\t\treturn this.setState({\r\n\t\t\tinputValue: value\r\n\t\t}, function() {\r\n\t\t\treturn this.props.onChange( localMoment );\r\n\t\t});\r\n\t},\r\n\r\n\tshowView: function( view ){\r\n\t\tvar me = this;\r\n\t\treturn function( e ){\r\n\t\t\tme.setState({ currentView: view });\r\n\t\t};\r\n\t},\r\n\r\n\tsetDate: function( type ){\r\n\t\tvar me = this,\r\n\t\t\tnextViews = {\r\n\t\t\t\tmonth: 'days',\r\n\t\t\t\tyear: 'months'\r\n\t\t\t}\r\n\t\t;\r\n\t\treturn function( e ){\r\n\t\t\tme.setState({\r\n\t\t\t\tviewDate: me.state.viewDate.clone()[ type ]( parseInt(e.target.getAttribute('data-value')) ).startOf( type ),\r\n\t\t\t\tcurrentView: nextViews[ type ]\r\n\t\t\t});\r\n\t\t};\r\n\t},\r\n\r\n\taddTime: function( amount, type, toSelected ){\r\n\t\treturn this.updateTime( 'add', amount, type, toSelected );\r\n\t},\r\n\r\n\tsubtractTime: function( amount, type, toSelected ){\r\n\t\treturn this.updateTime( 'subtract', amount, type, toSelected );\r\n\t},\r\n\r\n\tupdateTime: function( op, amount, type, toSelected ){\r\n\t\tvar me = this;\r\n\r\n\t\treturn function(){\r\n\t\t\tvar update = {},\r\n\t\t\t\tdate = toSelected ? 'selectedDate' : 'viewDate'\r\n\t\t\t;\r\n\r\n\t\t\tupdate[ date ] = me.state[ date ].clone()[ op ]( amount, type );\r\n\r\n\t\t\tme.setState( update );\r\n\t\t};\r\n\t},\r\n\r\n\tallowedSetTime: ['hours','minutes','seconds', 'milliseconds'],\r\n\tsetTime: function( type, value ){\r\n\t\tvar index = this.allowedSetTime.indexOf( type ) + 1,\r\n\t\t\tdate = this.state.selectedDate.clone(),\r\n\t\t\tnextType\r\n\t\t;\r\n\r\n\t\t// It is needed to set all the time properties\r\n\t\t// to not to reset the time\r\n\t\tdate[ type ]( value );\r\n\t\tfor (; index < this.allowedSetTime.length; index++) {\r\n\t\t\tnextType = this.allowedSetTime[index];\r\n\t\t\tdate[ nextType ]( date[nextType]() );\r\n\t\t}\r\n\r\n\t\tthis.setState({\r\n\t\t\tselectedDate: date,\r\n\t\t\tinputValue: date.format( this.state.inputFormat )\r\n\t\t});\r\n\r\n\t\tthis.props.onChange( date );\r\n\t},\r\n\r\n\tupdateDate: function( e ) {\r\n\t\tvar target = e.target,\r\n\t\t\tmodifier = 0,\r\n\t\t\tcurrentDate = this.state.selectedDate,\r\n\t\t\tdate\r\n\t\t;\r\n\r\n\t\tif(target.className.indexOf(\"new\") != -1)\r\n\t\t\tmodifier = 1;\r\n\t\telse if(target.className.indexOf(\"old\") != -1)\r\n\t\t\tmodifier = -1;\r\n\r\n\t\tdate = this.state.viewDate.clone()\r\n\t\t\t.month( this.state.viewDate.month() + modifier )\r\n\t\t\t.date( parseInt( target.getAttribute('data-value') ) )\r\n\t\t\t.hours( currentDate.hours() )\r\n\t\t\t.minutes( currentDate.minutes() )\r\n\t\t\t.seconds( currentDate.seconds() )\r\n\t\t\t.milliseconds( currentDate.milliseconds() )\r\n\t\t;\r\n\r\n\t\tthis.setState({\r\n\t\t\tselectedDate: date,\r\n\t\t\tviewDate: date.clone().startOf('month'),\r\n\t\t\tinputValue: date.format( this.state.inputFormat )\r\n\t\t});\r\n\r\n\t\tthis.props.onChange( date );\r\n\t},\r\n\r\n\topenCalendar: function() {\r\n\t\tthis.setState({ open: true });\r\n\t},\r\n\r\n\thandleClickOutside: function(){\r\n\t\tthis.props.onBlur( this.state.selectedDate );\r\n\t\tif( this.props.input && this.state.open )\r\n\t\t\tthis.setState({ open: false });\r\n\t},\r\n\r\n\tlocalMoment: function( date ){\r\n\t\tvar m = moment( date );\r\n\t\tif( this.props.locale )\r\n\t\t\tm.locale( this.props.locale );\r\n\t\treturn m;\r\n\t},\r\n\r\n\tcomponentProps: {\r\n\t\tfromProps: ['viewMode', 'minDate', 'maxDate', 'renderDay', 'renderMonth', 'renderYear'],\r\n\t\tfromState: ['viewDate', 'selectedDate' ],\r\n\t\tfromThis: ['setDate', 'setTime', 'showView', 'addTime', 'subtractTime', 'updateDate', 'localMoment']\r\n\t},\r\n\r\n\tgetComponentProps: function(){\r\n\t\tvar me = this,\r\n\t\t\tformats = this.getFormats( this.props ),\r\n\t\t\tprops = {dateFormat: formats.date, timeFormat: formats.time}\r\n\t\t;\r\n\r\n\t\tthis.componentProps.fromProps.forEach( function( name ){\r\n\t\t\tprops[ name ] = me.props[ name ];\r\n\t\t});\r\n\t\tthis.componentProps.fromState.forEach( function( name ){\r\n\t\t\tprops[ name ] = me.state[ name ];\r\n\t\t});\r\n\t\tthis.componentProps.fromThis.forEach( function( name ){\r\n\t\t\tprops[ name ] = me[ name ];\r\n\t\t});\r\n\r\n\t\treturn props;\r\n\t},\r\n\r\n\trender: function() {\r\n\t\tvar Component = this.viewComponents[ this.state.currentView ],\r\n\t\t\tDOM = React.DOM,\r\n\t\t\tclassName = 'rdt',\r\n\t\t\tchildren = []\r\n\t\t;\r\n\r\n\t\tif( this.props.input ){\r\n\t\t\tchildren = [ DOM.input( assign({\r\n\t\t\t\tkey: 'i',\r\n\t\t\t\ttype:'text',\r\n\t\t\t\tclassName: 'form-control', \r\n\t\t\t\tonFocus: this.openCalendar,\r\n\t\t\t\tonChange: this.onChange,\r\n\t\t\t\tvalue: this.state.inputValue\r\n\t\t\t}, this.props.inputProps ))];\r\n\t\t}\r\n\t\telse {\r\n\t\t\tclassName += ' rdtStatic';\r\n\t\t}\r\n\r\n\t\tif( this.state.open )\r\n\t\t\tclassName += ' rdtOpen';\r\n\r\n\t\treturn DOM.div({className: className}, children.concat(\r\n\t\t\tDOM.div(\r\n\t\t\t\t{ key: 'dt', className: 'rdtPicker' },\r\n\t\t\t\tReact.createElement( Component, this.getComponentProps())\r\n\t\t\t)\r\n\t\t));\r\n\t}\r\n});\r\n\r\n// Make moment accessible through the Datetime class\r\nDatetime.moment = moment;\r\n\r\nmodule.exports = Datetime;\r\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./Datetime.js\n ** module id = 0\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./Datetime.js?");
+	eval("'use strict';\r\n\r\n__webpack_require__(1);\r\n\r\nvar assign = __webpack_require__(2),\r\n\tReact = __webpack_require__(3),\r\n\tDaysView = __webpack_require__(4),\r\n\tMonthsView = __webpack_require__(6),\r\n\tYearsView = __webpack_require__(7),\r\n\tTimeView = __webpack_require__(8),\r\n\tmoment = __webpack_require__(5)\r\n;\r\n\r\nvar TYPES = React.PropTypes;\r\nvar Datetime = React.createClass({\r\n\tmixins: [\r\n\t\t__webpack_require__(9)\r\n\t],\r\n\tviewComponents: {\r\n\t\tdays: DaysView,\r\n\t\tmonths: MonthsView,\r\n\t\tyears: YearsView,\r\n\t\ttime: TimeView\r\n\t},\r\n\tpropTypes: {\r\n\t\tvalue: TYPES.object,\r\n\t\tdefaultValue: TYPES.object,\r\n\t\tonBlur: TYPES.func,\r\n\t\tonChange: TYPES.func,\r\n\t\tlocale: TYPES.string,\r\n\t\tinput: TYPES.bool,\r\n\t\t// dateFormat: TYPES.string | TYPES.bool,\r\n\t\t// timeFormat: TYPES.string | TYPES.bool,\r\n\t\tinputProps: TYPES.object,\r\n\t\tviewMode: TYPES.oneOf(['years', 'months', 'days', 'time']),\r\n\t\tisValidDate: TYPES.func,\r\n\t\tminDate: TYPES.object,\r\n\t\tmaxDate: TYPES.object\r\n\t},\r\n\r\n\tgetDefaultProps: function() {\r\n\t\tvar nof = function(){};\r\n\t\treturn {\r\n\t\t\tclassName: '',\r\n\t\t\tvalue: false,\r\n\t\t\tdefaultValue: new Date(),\r\n\t\t\tviewMode: 'days',\r\n\t\t\tinputProps: {},\r\n\t\t\tinput: true,\r\n\t\t\tonBlur: nof,\r\n\t\t\tonChange: nof,\r\n\t\t\ttimeFormat: true,\r\n\t\t\tdateFormat: true\r\n\t\t};\r\n\t},\r\n\r\n\tgetInitialState: function() {\r\n\t\tvar state = this.getStateFromProps( this.props );\r\n\r\n\t\tstate.open = !this.props.input;\r\n\t\tstate.currentView = this.props.viewMode;\r\n\r\n\t\treturn state;\r\n\t},\r\n\r\n\tgetStateFromProps: function( props ){\r\n\t\tvar formats = this.getFormats( props ),\r\n\t\t\tdate = props.value || props.defaultValue,\r\n\t\t\tselectedDate\r\n\t\t;\r\n\r\n\t\tif( typeof date == 'string')\r\n\t\t\tselectedDate = this.localMoment( date, formats.datetime );\r\n\t\telse\r\n\t\t\tselectedDate = this.localMoment( date );\r\n\r\n\t\treturn {\r\n\t\t\tinputFormat: formats.datetime,\r\n\t\t\tviewDate: this.localMoment(date).startOf(\"month\"),\r\n\t\t\tselectedDate: this.localMoment(date),\r\n\t\t\tinputValue: this.localMoment(date).format( formats.datetime )\r\n\t\t};\r\n\t},\r\n\r\n\tgetFormats: function( props ){\r\n\t\tvar formats = {\r\n\t\t\t\tdate: props.dateFormat || '',\r\n\t\t\t\ttime: props.timeFormat || ''\r\n\t\t\t},\r\n\t\t\tlocale = this.localMoment( props.date ).localeData()\r\n\t\t;\r\n\r\n\t\tif( formats.date === true ){\r\n\t\t\tformats.date = locale.longDateFormat('L');\r\n\t\t}\r\n\t\tif( formats.time === true ){\r\n\t\t\tformats.time = locale.longDateFormat('LT');\r\n\t\t}\r\n\r\n\t\tformats.datetime = formats.date + ' ' + formats.time;\r\n\r\n\t\treturn formats;\r\n\t},\r\n\r\n\tcomponentWillReceiveProps: function(nextProps) {\r\n\t\tvar formats = this.getFormats( nextProps ),\r\n\t\t\tupdate = {}\r\n\t\t;\r\n\r\n\t\tif( nextProps.value ){\r\n\t\t\tupdate = this.getStateFromProps( nextProps );\r\n\t\t}\r\n\t\tif ( formats.datetime !== this.getFormats( this.props ).datetime ) {\r\n\t\t\tupdate.inputFormat = formats.datetime;\r\n\t\t}\r\n\r\n\t\tthis.setState( update );\r\n\t},\r\n\r\n\tonInputChange: function( e ) {\r\n\t\tvar value = e.target == null ? e : e.target.value,\r\n\t\t\tlocalMoment = this.localMoment( value, this.state.inputFormat ),\r\n\t\t\tupdate = { inputValue: value }\r\n\t\t;\r\n\r\n\t\tif ( localMoment.isValid() && !this.props.value ) {\r\n\t\t\tupdate.selectedDate = localMoment;\r\n\t\t\tupdate.viewDate = localMoment.clone().startOf(\"month\");\r\n\t\t}\r\n\r\n\t\treturn this.setState( update, function() {\r\n\t\t\tif( localMoment.isValid() )\r\n\t\t\t\treturn this.props.onChange( localMoment );\r\n\t\t});\r\n\t},\r\n\r\n\tshowView: function( view ){\r\n\t\tvar me = this;\r\n\t\treturn function( e ){\r\n\t\t\tme.setState({ currentView: view });\r\n\t\t};\r\n\t},\r\n\r\n\tsetDate: function( type ){\r\n\t\tvar me = this,\r\n\t\t\tnextViews = {\r\n\t\t\t\tmonth: 'days',\r\n\t\t\t\tyear: 'months'\r\n\t\t\t}\r\n\t\t;\r\n\t\treturn function( e ){\r\n\t\t\tme.setState({\r\n\t\t\t\tviewDate: me.state.viewDate.clone()[ type ]( parseInt(e.target.getAttribute('data-value')) ).startOf( type ),\r\n\t\t\t\tcurrentView: nextViews[ type ]\r\n\t\t\t});\r\n\t\t};\r\n\t},\r\n\r\n\taddTime: function( amount, type, toSelected ){\r\n\t\treturn this.updateTime( 'add', amount, type, toSelected );\r\n\t},\r\n\r\n\tsubtractTime: function( amount, type, toSelected ){\r\n\t\treturn this.updateTime( 'subtract', amount, type, toSelected );\r\n\t},\r\n\r\n\tupdateTime: function( op, amount, type, toSelected ){\r\n\t\tvar me = this;\r\n\r\n\t\treturn function(){\r\n\t\t\tvar update = {},\r\n\t\t\t\tdate = toSelected ? 'selectedDate' : 'viewDate'\r\n\t\t\t;\r\n\r\n\t\t\tupdate[ date ] = me.state[ date ].clone()[ op ]( amount, type );\r\n\r\n\t\t\tme.setState( update );\r\n\t\t};\r\n\t},\r\n\r\n\tallowedSetTime: ['hours','minutes','seconds', 'milliseconds'],\r\n\tsetTime: function( type, value ){\r\n\t\tvar index = this.allowedSetTime.indexOf( type ) + 1,\r\n\t\t\tdate = this.state.selectedDate.clone(),\r\n\t\t\tnextType\r\n\t\t;\r\n\r\n\t\t// It is needed to set all the time properties\r\n\t\t// to not to reset the time\r\n\t\tdate[ type ]( value );\r\n\t\tfor (; index < this.allowedSetTime.length; index++) {\r\n\t\t\tnextType = this.allowedSetTime[index];\r\n\t\t\tdate[ nextType ]( date[nextType]() );\r\n\t\t}\r\n\r\n\t\tif( !this.props.value ){\r\n\t\t\tthis.setState({\r\n\t\t\t\tselectedDate: date,\r\n\t\t\t\tinputValue: date.format( this.state.inputFormat )\r\n\t\t\t});\r\n\t\t}\r\n\t\tthis.props.onChange( date );\r\n\t},\r\n\r\n\tupdateSelectedDate: function( e ) {\r\n\t\tvar target = e.target,\r\n\t\t\tmodifier = 0,\r\n\t\t\tcurrentDate = this.state.selectedDate,\r\n\t\t\tdate\r\n\t\t;\r\n\r\n\t\tif(target.className.indexOf(\"new\") != -1)\r\n\t\t\tmodifier = 1;\r\n\t\telse if(target.className.indexOf(\"old\") != -1)\r\n\t\t\tmodifier = -1;\r\n\r\n\t\tdate = this.state.viewDate.clone()\r\n\t\t\t.month( this.state.viewDate.month() + modifier )\r\n\t\t\t.date( parseInt( target.getAttribute('data-value') ) )\r\n\t\t\t.hours( currentDate.hours() )\r\n\t\t\t.minutes( currentDate.minutes() )\r\n\t\t\t.seconds( currentDate.seconds() )\r\n\t\t\t.milliseconds( currentDate.milliseconds() )\r\n\t\t;\r\n\r\n\t\tif( !this.props.value ){\r\n\t\t\tthis.setState({\r\n\t\t\t\tselectedDate: date,\r\n\t\t\t\tviewDate: date.clone().startOf('month'),\r\n\t\t\t\tinputValue: date.format( this.state.inputFormat )\r\n\t\t\t});\r\n\t\t}\r\n\r\n\t\tthis.props.onChange( date );\r\n\t},\r\n\r\n\topenCalendar: function() {\r\n\t\tthis.setState({ open: true });\r\n\t},\r\n\r\n\thandleClickOutside: function(){\r\n\t\tthis.props.onBlur( this.state.selectedDate );\r\n\t\tif( this.props.input && this.state.open )\r\n\t\t\tthis.setState({ open: false });\r\n\t},\r\n\r\n\tlocalMoment: function( date, format ){\r\n\t\tvar m = moment( date, format );\r\n\t\tif( this.props.locale )\r\n\t\t\tm.locale( this.props.locale );\r\n\t\treturn m;\r\n\t},\r\n\r\n\tcomponentProps: {\r\n\t\tfromProps: ['value', 'isValidDate', 'renderDay', 'renderMonth', 'renderYear'],\r\n\t\tfromState: ['viewDate', 'selectedDate' ],\r\n\t\tfromThis: ['setDate', 'setTime', 'showView', 'addTime', 'subtractTime', 'updateSelectedDate', 'localMoment']\r\n\t},\r\n\r\n\tgetComponentProps: function(){\r\n\t\tvar me = this,\r\n\t\t\tformats = this.getFormats( this.props ),\r\n\t\t\tprops = {dateFormat: formats.date, timeFormat: formats.time}\r\n\t\t;\r\n\r\n\t\tthis.componentProps.fromProps.forEach( function( name ){\r\n\t\t\tprops[ name ] = me.props[ name ];\r\n\t\t});\r\n\t\tthis.componentProps.fromState.forEach( function( name ){\r\n\t\t\tprops[ name ] = me.state[ name ];\r\n\t\t});\r\n\t\tthis.componentProps.fromThis.forEach( function( name ){\r\n\t\t\tprops[ name ] = me[ name ];\r\n\t\t});\r\n\r\n\t\treturn props;\r\n\t},\r\n\r\n\trender: function() {\r\n\t\tvar Component = this.viewComponents[ this.state.currentView ],\r\n\t\t\tDOM = React.DOM,\r\n\t\t\tclassName = 'rdt ' + this.props.className,\r\n\t\t\tchildren = []\r\n\t\t;\r\n\r\n\t\tif( this.props.input ){\r\n\t\t\tchildren = [ DOM.input( assign({\r\n\t\t\t\tkey: 'i',\r\n\t\t\t\ttype:'text',\r\n\t\t\t\tclassName: 'form-control',\r\n\t\t\t\tonFocus: this.openCalendar,\r\n\t\t\t\tonChange: this.onInputChange,\r\n\t\t\t\tvalue: this.state.inputValue\r\n\t\t\t}, this.props.inputProps ))];\r\n\t\t}\r\n\t\telse {\r\n\t\t\tclassName += ' rdtStatic';\r\n\t\t}\r\n\r\n\t\tif( this.state.open )\r\n\t\t\tclassName += ' rdtOpen';\r\n\r\n\t\treturn DOM.div({className: className}, children.concat(\r\n\t\t\tDOM.div(\r\n\t\t\t\t{ key: 'dt', className: 'rdtPicker' },\r\n\t\t\t\tReact.createElement( Component, this.getComponentProps())\r\n\t\t\t)\r\n\t\t));\r\n\t}\r\n});\r\n\r\n// Make moment accessible through the Datetime class\r\nDatetime.moment = moment;\r\n\r\nmodule.exports = Datetime;\r\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./Datetime.js\n ** module id = 0\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./Datetime.js?");
 
@@ -87,3 +87,3 @@ /***/ },
 
-	eval("var React = __webpack_require__(3),\r\n\tmoment = __webpack_require__(5)\r\n;\r\n\r\nvar DOM = React.DOM;\r\nvar DateTimePickerDays = React.createClass({\r\n\r\n\trender: function() {\r\n\t\tvar footer = this.renderFooter(),\r\n\t\t\tdate = this.props.viewDate,\r\n\t\t\tlocale = date.localeData(),\r\n\t\t\ttableChildren\r\n\t\t;\r\n\r\n\t\ttableChildren = [\r\n\t\t\tDOM.thead({ key: 'th'}, [\r\n\t\t\t\tDOM.tr({ key: 'h'},[\r\n\t\t\t\t\tDOM.th({ key: 'p', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(1, 'months')}, '‹')),\r\n\t\t\t\t\tDOM.th({ key: 's', className: 'switch', onClick: this.props.showView('months'), colSpan: 5 }, locale.months( date ) + ' ' + date.year() ),\r\n\t\t\t\t\tDOM.th({ key: 'n', className: 'next' }, DOM.button({onClick: this.props.addTime(1, 'months')}, '›'))\r\n\t\t\t\t]),\r\n\t\t\t\tDOM.tr({ key: 'd'}, this.getDaysOfWeek( locale ).map( function( day ){ return DOM.th({ key: day, className: 'dow'}, day ); }) )\r\n\t\t\t]),\r\n\t\t\tDOM.tbody({key: 'tb'}, this.renderDays())\r\n\t\t];\r\n\r\n\t\tif( footer )\r\n\t\t\ttableChildren.push( footer );\r\n\r\n\t\treturn DOM.div({ className: 'rdtDays' },\r\n\t\t\tDOM.table({}, tableChildren )\r\n\t\t);\r\n\t},\r\n\r\n\t/**\r\n\t * Get a list of the days of the week\r\n\t * depending on the current locale\r\n\t * @return {array} A list with the shortname of the days\r\n\t */\r\n\tgetDaysOfWeek: function( locale ){\r\n\t\tvar days = locale._weekdaysMin,\r\n\t\t\tfirst = locale.firstDayOfWeek(),\r\n\t\t\tdow = [],\r\n\t\t\ti = 0\r\n\t\t;\r\n\r\n\t\tdays.forEach( function( day ){\r\n\t\t\tdow[ (7 + (i++) - first) % 7 ] = day;\r\n\t\t});\r\n\r\n\t\treturn dow;\r\n\t},\r\n\r\n\trenderDays: function() {\r\n\t\tvar date = this.props.viewDate,\r\n\t\t\tselected = this.props.selectedDate.clone(),\r\n\t\t\tprevMonth = date.clone().subtract( 1, 'months' ),\r\n\t\t\tcurrentYear = date.year(),\r\n\t\t\tcurrentMonth = date.month(),\r\n\t\t\tselectedDate = {y: selected.year(), M: selected.month(), d: selected.date()},\r\n\t\t\tminDate = this.props.minDate,\r\n\t\t\tmaxDate = this.props.maxDate,\r\n\t\t\tweeks = [],\r\n\t\t\tdays = [],\r\n\t\t\trenderer = this.props.renderDay || this.renderDay,\r\n\t\t\tclasses, disabled, dayProps\r\n\t\t;\r\n\r\n\t\t// Go to the last week of the previous month\r\n\t\tprevMonth.date( prevMonth.daysInMonth() ).startOf('week');\r\n\t\tvar lastDay = prevMonth.clone().add(42, 'd');\r\n\r\n\t\twhile( prevMonth.isBefore( lastDay ) ){\r\n\t\t\tclasses = 'day';\r\n\r\n\t\t\tif( prevMonth.year() < currentYear || prevMonth.month() < currentMonth )\r\n\t\t\t\tclasses += ' old';\r\n\t\t\telse if( prevMonth.year() > currentYear || prevMonth.month() > currentMonth )\r\n\t\t\t\tclasses += ' new';\r\n\r\n\t\t\tif( prevMonth.isSame( selectedDate ) )\r\n\t\t\t\tclasses += ' active';\r\n\r\n\t\t\tif (prevMonth.isSame(moment(), 'day') )\r\n\t\t\t\tclasses += ' today';\r\n\r\n\t\t\tdisabled = minDate && prevMonth.isBefore(minDate) || maxDate && prevMonth.isAfter(maxDate);\r\n\t\t\tif( disabled )\r\n\t\t\t\tclasses += ' disabled';\r\n\r\n\t\t\tdayProps = {\r\n\t\t\t\tkey: prevMonth.format('M_D'),\r\n\t\t\t\t'data-value': prevMonth.date(),\r\n\t\t\t\tclassName: classes\r\n\t\t\t};\r\n\t\t\tif( !disabled )\r\n\t\t\t\tdayProps.onClick = this.props.updateDate;\r\n\r\n\t\t\tdays.push( renderer( dayProps, prevMonth.clone(), selected ) );\r\n\r\n\t\t\tif( days.length == 7 ){\r\n\t\t\t\tweeks.push( DOM.tr( {key: prevMonth.format('M_D')}, days ) );\r\n\t\t\t\tdays = [];\r\n\t\t\t}\r\n\r\n\t\t\tprevMonth.add( 1, 'd' );\r\n\t\t}\r\n\r\n\t\treturn weeks;\r\n\t},\r\n\r\n\trenderDay: function( props, currentDate, selectedDate ){\r\n\t\treturn DOM.td( props, currentDate.date() );\r\n\t},\r\n\r\n\trenderFooter: function(){\r\n\t\tif( !this.props.timeFormat )\r\n\t\t\treturn '';\r\n\r\n\t\treturn DOM.tfoot({ key: 'tf'},\r\n\t\t\tDOM.tr({},\r\n\t\t\t\tDOM.td({ onClick: this.props.showView('time'), colSpan: 7, className: 'timeToggle'}, this.props.selectedDate.format( this.props.timeFormat ))\r\n\t\t\t)\r\n\t\t);\r\n\t}\r\n});\r\n\r\nmodule.exports = DateTimePickerDays;\r\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/DaysView.js\n ** module id = 4\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./src/DaysView.js?");
+	eval("var React = __webpack_require__(3),\r\n\tmoment = __webpack_require__(5)\r\n;\r\n\r\nvar DOM = React.DOM;\r\nvar DateTimePickerDays = React.createClass({\r\n\r\n\trender: function() {\r\n\t\tvar footer = this.renderFooter(),\r\n\t\t\tdate = this.props.viewDate,\r\n\t\t\tlocale = date.localeData(),\r\n\t\t\ttableChildren\r\n\t\t;\r\n\r\n\t\ttableChildren = [\r\n\t\t\tDOM.thead({ key: 'th'}, [\r\n\t\t\t\tDOM.tr({ key: 'h'},[\r\n\t\t\t\t\tDOM.th({ key: 'p', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(1, 'months'), type: 'button' }, '‹')),\r\n\t\t\t\t\tDOM.th({ key: 's', className: 'switch', onClick: this.props.showView('months'), colSpan: 5 }, locale.months( date ) + ' ' + date.year() ),\r\n\t\t\t\t\tDOM.th({ key: 'n', className: 'next' }, DOM.button({onClick: this.props.addTime(1, 'months'), type: 'button' }, '›'))\r\n\t\t\t\t]),\r\n\t\t\t\tDOM.tr({ key: 'd'}, this.getDaysOfWeek( locale ).map( function( day ){ return DOM.th({ key: day, className: 'dow'}, day ); }) )\r\n\t\t\t]),\r\n\t\t\tDOM.tbody({key: 'tb'}, this.renderDays())\r\n\t\t];\r\n\r\n\t\tif( footer )\r\n\t\t\ttableChildren.push( footer );\r\n\r\n\t\treturn DOM.div({ className: 'rdtDays' },\r\n\t\t\tDOM.table({}, tableChildren )\r\n\t\t);\r\n\t},\r\n\r\n\t/**\r\n\t * Get a list of the days of the week\r\n\t * depending on the current locale\r\n\t * @return {array} A list with the shortname of the days\r\n\t */\r\n\tgetDaysOfWeek: function( locale ){\r\n\t\tvar days = locale._weekdaysMin,\r\n\t\t\tfirst = locale.firstDayOfWeek(),\r\n\t\t\tdow = [],\r\n\t\t\ti = 0\r\n\t\t;\r\n\r\n\t\tdays.forEach( function( day ){\r\n\t\t\tdow[ (7 + (i++) - first) % 7 ] = day;\r\n\t\t});\r\n\r\n\t\treturn dow;\r\n\t},\r\n\r\n\trenderDays: function() {\r\n\t\tvar date = this.props.viewDate,\r\n\t\t\tselected = this.props.selectedDate.clone(),\r\n\t\t\tprevMonth = date.clone().subtract( 1, 'months' ),\r\n\t\t\tcurrentYear = date.year(),\r\n\t\t\tcurrentMonth = date.month(),\r\n\t\t\tselectedDate = {y: selected.year(), M: selected.month(), d: selected.date()},\r\n\t\t\tminDate = this.props.minDate,\r\n\t\t\tmaxDate = this.props.maxDate,\r\n\t\t\tweeks = [],\r\n\t\t\tdays = [],\r\n\t\t\trenderer = this.props.renderDay || this.renderDay,\r\n\t\t\tisValid = this.props.isValidDate || this.isValidDate,\r\n\t\t\tclasses, disabled, dayProps, currentDate\r\n\t\t;\r\n\r\n\t\t// Go to the last week of the previous month\r\n\t\tprevMonth.date( prevMonth.daysInMonth() ).startOf('week');\r\n\t\tvar lastDay = prevMonth.clone().add(42, 'd');\r\n\r\n\t\twhile( prevMonth.isBefore( lastDay ) ){\r\n\t\t\tclasses = 'day';\r\n\t\t\tcurrentDate = prevMonth.clone();\r\n\r\n\t\t\tif( prevMonth.year() < currentYear || prevMonth.month() < currentMonth )\r\n\t\t\t\tclasses += ' old';\r\n\t\t\telse if( prevMonth.year() > currentYear || prevMonth.month() > currentMonth )\r\n\t\t\t\tclasses += ' new';\r\n\r\n\t\t\tif( prevMonth.isSame( selectedDate ) )\r\n\t\t\t\tclasses += ' active';\r\n\r\n\t\t\tif (prevMonth.isSame(moment(), 'day') )\r\n\t\t\t\tclasses += ' today';\r\n\r\n\t\t\tdisabled = !isValid( currentDate, selected );\r\n\t\t\tif( disabled )\r\n\t\t\t\tclasses += ' disabled';\r\n\r\n\t\t\tdayProps = {\r\n\t\t\t\tkey: prevMonth.format('M_D'),\r\n\t\t\t\t'data-value': prevMonth.date(),\r\n\t\t\t\tclassName: classes\r\n\t\t\t};\r\n\t\t\tif( !disabled )\r\n\t\t\t\tdayProps.onClick = this.props.updateSelectedDate;\r\n\r\n\t\t\tdays.push( renderer( dayProps, currentDate, selected ) );\r\n\r\n\t\t\tif( days.length == 7 ){\r\n\t\t\t\tweeks.push( DOM.tr( {key: prevMonth.format('M_D')}, days ) );\r\n\t\t\t\tdays = [];\r\n\t\t\t}\r\n\r\n\t\t\tprevMonth.add( 1, 'd' );\r\n\t\t}\r\n\r\n\t\treturn weeks;\r\n\t},\r\n\r\n\trenderDay: function( props, currentDate, selectedDate ){\r\n\t\treturn DOM.td( props, currentDate.date() );\r\n\t},\r\n\r\n\trenderFooter: function(){\r\n\t\tif( !this.props.timeFormat )\r\n\t\t\treturn '';\r\n\r\n\t\treturn DOM.tfoot({ key: 'tf'},\r\n\t\t\tDOM.tr({},\r\n\t\t\t\tDOM.td({ onClick: this.props.showView('time'), colSpan: 7, className: 'timeToggle'}, this.props.selectedDate.format( this.props.timeFormat ))\r\n\t\t\t)\r\n\t\t);\r\n\t},\r\n\tisValidDate: function(){ return 1; }\r\n});\r\n\r\nmodule.exports = DateTimePickerDays;\r\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/DaysView.js\n ** module id = 4\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./src/DaysView.js?");
 
@@ -100,3 +100,3 @@ /***/ },
 
-	eval("'use strict';\r\n\r\nvar React = __webpack_require__(3),\r\nmoment = __webpack_require__(5)\r\n;\r\n\r\nvar DOM = React.DOM;\r\nvar DateTimePickerMonths = React.createClass({\r\n\trender: function() {\r\n\t\treturn DOM.div({ className: 'rdtMonths' },[\r\n\t\t\tDOM.table({ key: 'a'}, DOM.thead({}, DOM.tr({},[\r\n\t\t\t\tDOM.th({ key: 'prev', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(1, 'years')}, '‹')),\r\n\t\t\t\tDOM.th({ key: 'year', className: 'switch', onClick: this.props.showView('years'), colSpan: 2 }, this.props.viewDate.year() ),\r\n\t\t\t\tDOM.th({ key: 'next', className: 'next' }, DOM.button({onClick: this.props.addTime(1, 'years')}, '›'))\r\n\t\t\t]))),\r\n\t\t\tDOM.table({ key: 'months'}, DOM.tbody({ key: 'b'}, this.renderMonths()))\r\n\t\t]);\r\n\t},\r\n\r\n\trenderMonths: function() {\r\n\t\tvar date = this.props.selectedDate,\r\n\t\t\tmonth = date.month(),\r\n\t\t\tyear = this.props.viewDate.year(),\r\n\t\t\trows = [],\r\n\t\t\ti = 0,\r\n\t\t\tmonths = [],\r\n\t\t\trenderer = this.props.renderMonth || this.renderMonth,\r\n\t\t\tclasses, props\r\n\t\t;\r\n\r\n\t\twhile (i < 12) {\r\n\t\t\tclasses = \"month\";\r\n\t\t\tif( i === month && year === date.year() )\r\n\t\t\t\tclasses += \" active\";\r\n\r\n\t\t\tprops = {\r\n\t\t\t\tkey: i,\r\n\t\t\t\t'data-value': i,\r\n\t\t\t\tclassName: classes,\r\n\t\t\t\tonClick: this.props.setDate('month')\r\n\t\t\t};\r\n\r\n\t\t\tmonths.push( renderer( props, i, year, date.clone() ));\r\n\r\n\t\t\tif( months.length == 4 ){\r\n\t\t\t\trows.push( DOM.tr({ key: month + '_' + rows.length }, months) );\r\n\t\t\t\tmonths = [];\r\n\t\t\t}\r\n\r\n\t\t\ti++;\r\n\t\t}\r\n\r\n\t\treturn rows;\r\n\t},\r\n\r\n\trenderMonth: function( props, month, year, selectedDate ) {\r\n\t\treturn DOM.td( props, selectedDate.localeData()._monthsShort[ month ] );\r\n\t}\r\n});\r\n\r\nmodule.exports = DateTimePickerMonths;\r\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/MonthsView.js\n ** module id = 6\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./src/MonthsView.js?");
+	eval("'use strict';\r\n\r\nvar React = __webpack_require__(3),\r\nmoment = __webpack_require__(5)\r\n;\r\n\r\nvar DOM = React.DOM;\r\nvar DateTimePickerMonths = React.createClass({\r\n\trender: function() {\r\n\t\treturn DOM.div({ className: 'rdtMonths' },[\r\n\t\t\tDOM.table({ key: 'a'}, DOM.thead({}, DOM.tr({},[\r\n\t\t\t\tDOM.th({ key: 'prev', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(1, 'years'), type: 'button' }, '‹')),\r\n\t\t\t\tDOM.th({ key: 'year', className: 'switch', onClick: this.props.showView('years'), colSpan: 2 }, this.props.viewDate.year() ),\r\n\t\t\t\tDOM.th({ key: 'next', className: 'next' }, DOM.button({onClick: this.props.addTime(1, 'years'), type: 'button' }, '›'))\r\n\t\t\t]))),\r\n\t\t\tDOM.table({ key: 'months'}, DOM.tbody({ key: 'b'}, this.renderMonths()))\r\n\t\t]);\r\n\t},\r\n\r\n\trenderMonths: function() {\r\n\t\tvar date = this.props.selectedDate,\r\n\t\t\tmonth = date.month(),\r\n\t\t\tyear = this.props.viewDate.year(),\r\n\t\t\trows = [],\r\n\t\t\ti = 0,\r\n\t\t\tmonths = [],\r\n\t\t\trenderer = this.props.renderMonth || this.renderMonth,\r\n\t\t\tclasses, props\r\n\t\t;\r\n\r\n\t\twhile (i < 12) {\r\n\t\t\tclasses = \"month\";\r\n\t\t\tif( i === month && year === date.year() )\r\n\t\t\t\tclasses += \" active\";\r\n\r\n\t\t\tprops = {\r\n\t\t\t\tkey: i,\r\n\t\t\t\t'data-value': i,\r\n\t\t\t\tclassName: classes,\r\n\t\t\t\tonClick: this.props.setDate('month')\r\n\t\t\t};\r\n\r\n\t\t\tmonths.push( renderer( props, i, year, date.clone() ));\r\n\r\n\t\t\tif( months.length == 4 ){\r\n\t\t\t\trows.push( DOM.tr({ key: month + '_' + rows.length }, months) );\r\n\t\t\t\tmonths = [];\r\n\t\t\t}\r\n\r\n\t\t\ti++;\r\n\t\t}\r\n\r\n\t\treturn rows;\r\n\t},\r\n\r\n\trenderMonth: function( props, month, year, selectedDate ) {\r\n\t\treturn DOM.td( props, selectedDate.localeData()._monthsShort[ month ] );\r\n\t}\r\n});\r\n\r\nmodule.exports = DateTimePickerMonths;\r\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/MonthsView.js\n ** module id = 6\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./src/MonthsView.js?");
 
@@ -107,3 +107,3 @@ /***/ },
 
-	eval("'use strict';\r\n\r\nvar React = __webpack_require__(3);\r\n\r\nvar DOM = React.DOM;\r\nvar DateTimePickerYears = React.createClass({\r\n\trender: function() {\r\n\t\tvar year = parseInt(this.props.viewDate.year() / 10, 10) * 10;\r\n\r\n\t\treturn DOM.div({ className: 'rdtYears' },[\r\n\t\t\tDOM.table({ key: 'a'}, DOM.thead({}, DOM.tr({},[\r\n\t\t\t\tDOM.th({ key: 'prev', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(10, 'years')}, '‹')),\r\n\t\t\t\tDOM.th({ key: 'year', className: 'switch', onClick: this.props.showView('years'), colSpan: 2 }, year + '-' + (year + 9) ),\r\n\t\t\t\tDOM.th({ key: 'next', className: 'next'}, DOM.button({onClick: this.props.addTime(10, 'years')}, '›'))\r\n\t\t\t\t]))),\r\n\t\t\tDOM.table({ key: 'years'}, DOM.tbody({}, this.renderYears( year )))\r\n\t\t]);\r\n\t},\r\n\r\n\trenderYears: function( year ) {\r\n\t\tvar years = [],\r\n\t\t\ti = -1,\r\n\t\t\trows = [],\r\n\t\t\trenderer = this.props.renderYear || this.renderYear,\r\n\t\t\tclasses, props\r\n\t\t;\r\n\r\n\t\tyear--;\r\n\t\twhile (i < 11) {\r\n\t\t\tclasses = 'year';\r\n\t\t\tif( i === -1 | i === 10 )\r\n\t\t\t\tclasses += ' old';\r\n\t\t\tif( this.props.selectedDate.year() === year )\r\n\t\t\t\tclasses += ' active';\r\n\r\n\t\t\tprops = {\r\n\t\t\t\tkey: year,\r\n\t\t\t\t'data-value': year,\r\n\t\t\t\tclassName: classes,\r\n\t\t\t\tonClick: this.props.setDate('year')\r\n\t\t\t};\r\n\r\n\t\t\tyears.push( renderer( props, year, this.props.selectedDate.clone() ));\r\n\r\n\t\t\tif( years.length == 4 ){\r\n\t\t\t\trows.push( DOM.tr({ key: i }, years ) );\r\n\t\t\t\tyears = [];\r\n\t\t\t}\r\n\r\n\t\t\tyear++;\r\n\t\t\ti++;\r\n\t\t}\r\n\r\n\t\treturn rows;\r\n\t},\r\n\r\n\trenderYear: function( props, year, selectedDate ){\r\n\t\treturn DOM.td( props, year );\r\n\t}\r\n});\r\n\r\nmodule.exports = DateTimePickerYears;\r\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/YearsView.js\n ** module id = 7\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./src/YearsView.js?");
+	eval("'use strict';\r\n\r\nvar React = __webpack_require__(3);\r\n\r\nvar DOM = React.DOM;\r\nvar DateTimePickerYears = React.createClass({\r\n\trender: function() {\r\n\t\tvar year = parseInt(this.props.viewDate.year() / 10, 10) * 10;\r\n\r\n\t\treturn DOM.div({ className: 'rdtYears' },[\r\n\t\t\tDOM.table({ key: 'a'}, DOM.thead({}, DOM.tr({},[\r\n\t\t\t\tDOM.th({ key: 'prev', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(10, 'years'), type: 'button' }, '‹')),\r\n\t\t\t\tDOM.th({ key: 'year', className: 'switch', onClick: this.props.showView('years'), colSpan: 2 }, year + '-' + (year + 9) ),\r\n\t\t\t\tDOM.th({ key: 'next', className: 'next'}, DOM.button({onClick: this.props.addTime(10, 'years'), type: 'button' }, '›'))\r\n\t\t\t\t]))),\r\n\t\t\tDOM.table({ key: 'years'}, DOM.tbody({}, this.renderYears( year )))\r\n\t\t]);\r\n\t},\r\n\r\n\trenderYears: function( year ) {\r\n\t\tvar years = [],\r\n\t\t\ti = -1,\r\n\t\t\trows = [],\r\n\t\t\trenderer = this.props.renderYear || this.renderYear,\r\n\t\t\tclasses, props\r\n\t\t;\r\n\r\n\t\tyear--;\r\n\t\twhile (i < 11) {\r\n\t\t\tclasses = 'year';\r\n\t\t\tif( i === -1 | i === 10 )\r\n\t\t\t\tclasses += ' old';\r\n\t\t\tif( this.props.selectedDate.year() === year )\r\n\t\t\t\tclasses += ' active';\r\n\r\n\t\t\tprops = {\r\n\t\t\t\tkey: year,\r\n\t\t\t\t'data-value': year,\r\n\t\t\t\tclassName: classes,\r\n\t\t\t\tonClick: this.props.setDate('year')\r\n\t\t\t};\r\n\r\n\t\t\tyears.push( renderer( props, year, this.props.selectedDate.clone() ));\r\n\r\n\t\t\tif( years.length == 4 ){\r\n\t\t\t\trows.push( DOM.tr({ key: i }, years ) );\r\n\t\t\t\tyears = [];\r\n\t\t\t}\r\n\r\n\t\t\tyear++;\r\n\t\t\ti++;\r\n\t\t}\r\n\r\n\t\treturn rows;\r\n\t},\r\n\r\n\trenderYear: function( props, year, selectedDate ){\r\n\t\treturn DOM.td( props, year );\r\n\t}\r\n});\r\n\r\nmodule.exports = DateTimePickerYears;\r\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/YearsView.js\n ** module id = 7\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./src/YearsView.js?");
 
@@ -114,3 +114,3 @@ /***/ },
 
-	eval("'use strict';\r\n\r\nvar React = __webpack_require__(3);\r\n\r\nvar DOM = React.DOM;\r\nvar DateTimePickerTime = React.createClass({\r\n\tgetInitialState: function(){\r\n\t\tvar date = this.props.selectedDate,\r\n\t\t\tformat = this.props.timeFormat,\r\n\t\t\tcounters = []\r\n\t\t;\r\n\r\n\t\tif( format.indexOf('H') != -1 || format.indexOf('h') != -1 ){\r\n\t\t\tcounters.push('hours');\r\n\t\t\tif( format.indexOf('m') != -1 ){\r\n\t\t\t\tcounters.push('minutes');\r\n\t\t\t\tif( format.indexOf('s') != -1 ){\r\n\t\t\t\t\tcounters.push('seconds');\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn {\r\n\t\t\thours: date.format('H'),\r\n\t\t\tminutes: date.format('mm'),\r\n\t\t\tseconds: date.format('ss'),\r\n\t\t\tmilliseconds: date.format('SSS'),\r\n\t\t\tcounters: counters\r\n\t\t};\r\n\t},\r\n\trenderCounter: function( type ){\r\n\t\treturn DOM.div({ key: type, className: 'rdtCounter'}, [\r\n\t\t\tDOM.button({ key:'up', className: 'btn', onMouseDown: this.onStartClicking( 'increase', type ) }, '▲' ),\r\n\t\t\tDOM.div({ key:'c', className: 'rdtCount' }, this.state[ type ] ),\r\n\t\t\tDOM.button({ key:'do', className: 'btn', onMouseDown: this.onStartClicking( 'decrease', type ) }, '▼' )\r\n\t\t]);\r\n\t},\r\n\trender: function() {\r\n\t\tvar me = this,\r\n\t\t\tcounters = []\r\n\t\t;\r\n\r\n\t\tthis.state.counters.forEach( function(c){\r\n\t\t\tif( counters.length )\r\n\t\t\t\tcounters.push( DOM.div( {key: 'sep' + counters.length, className: 'rdtCounterSeparator' }, ':' ));\r\n\t\t\tcounters.push( me.renderCounter( c ) );\r\n\t\t});\r\n\r\n\t\tif( this.state.counters.length == 3 && this.props.timeFormat.indexOf('S') != -1 ){\r\n\t\t\tcounters.push( DOM.div( {className: 'rdtCounterSeparator', key: 'sep5' }, ':' ));\r\n\t\t\tcounters.push(\r\n\t\t\t\tDOM.div( {className: 'rdtCounter rdtMilli', key:'m'},\r\n\t\t\t\t\tDOM.input({ value: this.state.milliseconds, type: 'text', onChange: this.updateMilli })\r\n\t\t\t\t\t)\r\n\t\t\t\t);\r\n\t\t}\r\n\r\n\t\treturn DOM.div( {className: 'rdtTime'},\r\n\t\t\tDOM.table( {}, [\r\n\t\t\t\tthis.renderHeader(),\r\n\t\t\t\tDOM.tbody({key: 'b'}, DOM.tr({}, DOM.td({},\r\n\t\t\t\t\tDOM.div({ className: 'rdtCounters' }, counters )\r\n\t\t\t\t)))\r\n\t\t\t])\r\n\t\t);\r\n\r\n\t},\r\n\tupdateMilli: function( e ){\r\n\t\tvar milli = parseInt( e.target.value );\r\n\t\tif( milli == e.target.value && milli >= 0 && milli < 1000 ){\r\n\t\t\tthis.props.setTime( 'milliseconds', milli );\r\n\t\t\tthis.setState({ milliseconds: milli });\r\n\t\t}\r\n\t},\r\n\trenderHeader: function(){\r\n\t\tif( !this.props.dateFormat )\r\n\t\t\treturn '';\r\n\r\n\t\treturn DOM.thead({ key: 'h'}, DOM.tr({},\r\n\t\t\tDOM.th( {colSpan: 4, onClick: this.props.showView('days')}, this.props.selectedDate.format( this.props.dateFormat ) )\r\n\t\t));\r\n\t},\r\n\tonStartClicking: function( action, type ){\r\n\t\tvar me = this,\r\n\t\t\tupdate = {}\r\n\t\t;\r\n\t\treturn function(){\r\n\t\t\tvar update = {};\r\n\t\t\tupdate[ type ] = me[ action ]( type );\r\n\t\t\tme.setState( update );\r\n\r\n\t\t\tme.timer = setTimeout( function(){\r\n\t\t\t\tme.increaseTimer = setInterval( function(){\r\n\t\t\t\t\tupdate[ type ] = me[ action ]( type );\r\n\t\t\t\t\tme.setState( update );\r\n\t\t\t\t},80);\r\n\t\t\t}, 500);\r\n\r\n\t\t\tme.mouseUpListener = function(){\r\n\t\t\t\tclearTimeout( me.timer );\r\n\t\t\t\tclearInterval( me.increaseTimer );\r\n\t\t\t\tme.props.setTime( type, me.state[ type ] );\r\n\t\t\t\tdocument.body.removeEventListener('mouseup', me.mouseUpListener);\r\n\t\t\t};\r\n\r\n\t\t\tdocument.body.addEventListener('mouseup', me.mouseUpListener);\r\n\t\t};\r\n\t},\r\n\r\n\tmaxValues: {\r\n\t\thours: 23,\r\n\t\tminutes: 59,\r\n\t\tseconds: 59,\r\n\t\tmilliseconds: 999\r\n\t},\r\n\tpadValues: {\r\n\t\thours: 1,\r\n\t\tminutes: 2,\r\n\t\tseconds: 2,\r\n\t\tmilliseconds: 3\r\n\t},\r\n\tincrease: function( type ){\r\n\t\tvar value = parseInt(this.state[ type ]) + 1;\r\n\t\tif( value > this.maxValues[ type ] )\r\n\t\t\tvalue = 0;\r\n\t\treturn this.pad( type, value );\r\n\t},\r\n\tdecrease: function( type ){\r\n\t\tvar value = parseInt(this.state[ type ]) - 1;\r\n\t\tif( value < 0 )\r\n\t\t\tvalue = this.maxValues[ type ];\r\n\t\treturn this.pad( type, value );\r\n\t},\r\n\tpad: function( type, value ){\r\n\t\tvar str = value + '';\r\n\t\twhile( str.length < this.padValues[ type ] )\r\n\t\t\tstr = '0' + str;\r\n\t\treturn str;\r\n\t}\r\n});\r\n\r\nmodule.exports = DateTimePickerTime;\r\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/TimeView.js\n ** module id = 8\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./src/TimeView.js?");
+	eval("'use strict';\r\n\r\nvar React = __webpack_require__(3);\r\n\r\nvar DOM = React.DOM;\r\nvar DateTimePickerTime = React.createClass({\r\n\tgetInitialState: function(){\r\n\t\treturn this.calculateState( this.props );\r\n\t},\r\n\tcalculateState: function( props ){\r\n\t\tvar date = props.selectedDate,\r\n\t\t\tformat = props.timeFormat,\r\n\t\t\tcounters = []\r\n\t\t;\r\n\r\n\t\tif( format.indexOf('H') != -1 || format.indexOf('h') != -1 ){\r\n\t\t\tcounters.push('hours');\r\n\t\t\tif( format.indexOf('m') != -1 ){\r\n\t\t\t\tcounters.push('minutes');\r\n\t\t\t\tif( format.indexOf('s') != -1 ){\r\n\t\t\t\t\tcounters.push('seconds');\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn {\r\n\t\t\thours: date.format('H'),\r\n\t\t\tminutes: date.format('mm'),\r\n\t\t\tseconds: date.format('ss'),\r\n\t\t\tmilliseconds: date.format('SSS'),\r\n\t\t\tcounters: counters\r\n\t\t};\r\n\t},\r\n\trenderCounter: function( type ){\r\n\t\treturn DOM.div({ key: type, className: 'rdtCounter'}, [\r\n\t\t\tDOM.button({ key:'up', className: 'btn', onMouseDown: this.onStartClicking( 'increase', type ), type: 'button' }, '▲' ),\r\n\t\t\tDOM.div({ key:'c', className: 'rdtCount' }, this.state[ type ] ),\r\n\t\t\tDOM.button({ key:'do', className: 'btn', onMouseDown: this.onStartClicking( 'decrease', type ), type: 'button' }, '▼' )\r\n\t\t]);\r\n\t},\r\n\trender: function() {\r\n\t\tvar me = this,\r\n\t\t\tcounters = []\r\n\t\t;\r\n\r\n\t\tthis.state.counters.forEach( function(c){\r\n\t\t\tif( counters.length )\r\n\t\t\t\tcounters.push( DOM.div( {key: 'sep' + counters.length, className: 'rdtCounterSeparator' }, ':' ));\r\n\t\t\tcounters.push( me.renderCounter( c ) );\r\n\t\t});\r\n\r\n\t\tif( this.state.counters.length == 3 && this.props.timeFormat.indexOf('S') != -1 ){\r\n\t\t\tcounters.push( DOM.div( {className: 'rdtCounterSeparator', key: 'sep5' }, ':' ));\r\n\t\t\tcounters.push(\r\n\t\t\t\tDOM.div( {className: 'rdtCounter rdtMilli', key:'m'},\r\n\t\t\t\t\tDOM.input({ value: this.state.milliseconds, type: 'text', onChange: this.updateMilli })\r\n\t\t\t\t\t)\r\n\t\t\t\t);\r\n\t\t}\r\n\r\n\t\treturn DOM.div( {className: 'rdtTime'},\r\n\t\t\tDOM.table( {}, [\r\n\t\t\t\tthis.renderHeader(),\r\n\t\t\t\tDOM.tbody({key: 'b'}, DOM.tr({}, DOM.td({},\r\n\t\t\t\t\tDOM.div({ className: 'rdtCounters' }, counters )\r\n\t\t\t\t)))\r\n\t\t\t])\r\n\t\t);\r\n\t},\r\n\tcomponentWillReceiveProps: function( nextProps, nextState ){\r\n\t\tthis.setState( this.calculateState( nextProps ) );\r\n\t},\r\n\tupdateMilli: function( e ){\r\n\t\tvar milli = parseInt( e.target.value );\r\n\t\tif( milli == e.target.value && milli >= 0 && milli < 1000 ){\r\n\t\t\tthis.props.setTime( 'milliseconds', milli );\r\n\t\t\tthis.setState({ milliseconds: milli });\r\n\t\t}\r\n\t},\r\n\trenderHeader: function(){\r\n\t\tif( !this.props.dateFormat )\r\n\t\t\treturn '';\r\n\r\n\t\treturn DOM.thead({ key: 'h'}, DOM.tr({},\r\n\t\t\tDOM.th( {colSpan: 4, onClick: this.props.showView('days')}, this.props.selectedDate.format( this.props.dateFormat ) )\r\n\t\t));\r\n\t},\r\n\tonStartClicking: function( action, type ){\r\n\t\tvar me = this,\r\n\t\t\tupdate = {},\r\n\t\t\tvalue = this.state[ type ]\r\n\t\t;\r\n\r\n\t\treturn function(){\r\n\t\t\tvar update = {};\r\n\t\t\tupdate[ type ] = me[ action ]( type );\r\n\t\t\tme.setState( update );\r\n\r\n\t\t\tme.timer = setTimeout( function(){\r\n\t\t\t\tme.increaseTimer = setInterval( function(){\r\n\t\t\t\t\tupdate[ type ] = me[ action ]( type );\r\n\t\t\t\t\tme.setState( update );\r\n\t\t\t\t},70);\r\n\t\t\t}, 500);\r\n\r\n\t\t\tme.mouseUpListener = function(){\r\n\t\t\t\tclearTimeout( me.timer );\r\n\t\t\t\tclearInterval( me.increaseTimer );\r\n\t\t\t\tme.props.setTime( type, me.state[ type ] );\r\n\t\t\t\tdocument.body.removeEventListener('mouseup', me.mouseUpListener);\r\n\t\t\t};\r\n\r\n\t\t\tdocument.body.addEventListener('mouseup', me.mouseUpListener);\r\n\t\t};\r\n\t},\r\n\r\n\tmaxValues: {\r\n\t\thours: 23,\r\n\t\tminutes: 59,\r\n\t\tseconds: 59,\r\n\t\tmilliseconds: 999\r\n\t},\r\n\tpadValues: {\r\n\t\thours: 1,\r\n\t\tminutes: 2,\r\n\t\tseconds: 2,\r\n\t\tmilliseconds: 3\r\n\t},\r\n\tincrease: function( type ){\r\n\t\tvar value = parseInt(this.state[ type ]) + 1;\r\n\t\tif( value > this.maxValues[ type ] )\r\n\t\t\tvalue = 0;\r\n\t\treturn this.pad( type, value );\r\n\t},\r\n\tdecrease: function( type ){\r\n\t\tvar value = parseInt(this.state[ type ]) - 1;\r\n\t\tif( value < 0 )\r\n\t\t\tvalue = this.maxValues[ type ];\r\n\t\treturn this.pad( type, value );\r\n\t},\r\n\tpad: function( type, value ){\r\n\t\tvar str = value + '';\r\n\t\twhile( str.length < this.padValues[ type ] )\r\n\t\t\tstr = '0' + str;\r\n\t\treturn str;\r\n\t}\r\n});\r\n\r\nmodule.exports = DateTimePickerTime;\r\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/TimeView.js\n ** module id = 8\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./src/TimeView.js?");
 
@@ -117,0 +117,0 @@ /***/ },

dist/react-datetime.min.js

 /*
-react-datetime v0.5.0
+react-datetime v1.0.0-rc.1
 https://github.com/arqex/react-datetime
 MIT: https://github.com/arqex/react-datetime/raw/master/LICENSE
 */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require(void 0),require(void 0)):"function"==typeof define&&define.amd?define([,],e):"object"==typeof exports?exports.Datetime=e(require(void 0),require(void 0)):t.Datetime=e(t.React,t.moment)}(this,function(t,e){return function(t){function e(n){if(s[n])return s[n].exports;var r=s[n]={exports:{},id:n,loaded:!1};return t[n].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var s={};return e.m=t,e.c=s,e.p="",e(0)}([function(t,e,s){"use strict";s(1);var n=s(2),r=s(3),i=s(4),a=s(6),o=s(7),c=s(8),u=s(5),l=r.PropTypes,d=r.createClass({mixins:[s(9)],viewComponents:{days:i,months:a,years:o,time:c},propTypes:{date:l.object,onBlur:l.func,onChange:l.func,locale:l.string,input:l.bool,dateFormat:l.string,timeFormat:l.string,inputProps:l.object,viewMode:l.oneOf(["years","months","days","time"]),minDate:l.object,maxDate:l.object},getDefaultProps:function(){var t=function(){};return{className:"form-control",date:new Date,viewMode:"days",inputProps:{},input:!0,onBlur:t,onChange:t}},getInitialState:function(){var t=this.getFormats(this.props),e=this.props.date;return{currentView:this.props.viewMode,open:!this.props.input,inputFormat:t.datetime,viewDate:this.localMoment(e).startOf("month"),selectedDate:this.localMoment(e),inputValue:this.localMoment(e).format(t.datetime)}},getFormats:function(t){var e={date:"",time:"",datetime:""},s=this.localMoment(t.date).localeData();return t.dateFormat&&(e.date=t.dateFormat),t.timeFormat&&(e.time=t.timeFormat),e.date||e.time?(t.dateFormat&&(e.date=t.dateFormat,e.datetime=e.date),t.timeFormat&&(e.date&&(e.datetime+=" "),e.time=t.timeFormat,e.datetime+=e.time)):(e.date=s.longDateFormat("L"),e.time=s.longDateFormat("LT"),e.datetime=e.date+" "+e.time),e},componentWillReceiveProps:function(t){var e=this.getFormats(t);return e.datetime!==this.getFormats(this.props).datetime?this.setState({inputFormat:t.inputFormat}):void 0},onChange:function(t){var e=null==t.target?t:t.target.value,s=this.localMoment(e);return s.isValid()&&this.setState({selectedDate:s,viewDate:s.clone().startOf("month")}),this.setState({inputValue:e},function(){return this.props.onChange(s)})},showView:function(t){var e=this;return function(s){e.setState({currentView:t})}},setDate:function(t){var e=this,s={month:"days",year:"months"};return function(n){e.setState({viewDate:e.state.viewDate.clone()[t](parseInt(n.target.getAttribute("data-value"))).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,n){var r=this;return function(){var i={},a=n?"selectedDate":"viewDate";i[a]=r.state[a].clone()[t](e,s),r.setState(i)}},allowedSetTime:["hours","minutes","seconds","milliseconds"],setTime:function(t,e){var s,n=this.allowedSetTime.indexOf(t)+1,r=this.state.selectedDate.clone();for(r[t](e);n<this.allowedSetTime.length;n++)s=this.allowedSetTime[n],r[s](r[s]());this.setState({selectedDate:r,inputValue:r.format(this.state.inputFormat)}),this.props.onChange(r)},updateDate:function(t){var e,s=t.target,n=0,r=this.state.selectedDate;-1!=s.className.indexOf("new")?n=1:-1!=s.className.indexOf("old")&&(n=-1),e=this.state.viewDate.clone().month(this.state.viewDate.month()+n).date(parseInt(s.getAttribute("data-value"))).hours(r.hours()).minutes(r.minutes()).seconds(r.seconds()).milliseconds(r.milliseconds()),this.setState({selectedDate:e,viewDate:e.clone().startOf("month"),inputValue:e.format(this.state.inputFormat)}),this.props.onChange(e)},openCalendar:function(){this.setState({open:!0})},handleClickOutside:function(){this.props.onBlur(this.state.selectedDate),this.props.input&&this.state.open&&this.setState({open:!1})},localMoment:function(t){var e=u(t);return this.props.locale&&e.locale(this.props.locale),e},componentProps:{fromProps:["viewMode","minDate","maxDate","renderDay","renderMonth","renderYear"],fromState:["viewDate","selectedDate"],fromThis:["setDate","setTime","showView","addTime","subtractTime","updateDate","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",i=[];return this.props.input?i=[e.input(n({key:"i",type:"text",className:"form-control",onFocus:this.openCalendar,onChange:this.onChange,value:this.state.inputValue},this.props.inputProps))]:s+=" rdtStatic",this.state.open&&(s+=" rdtOpen"),e.div({className:s},i.concat(e.div({key:"dt",className:"rdtPicker"},r.createElement(t,this.getComponentProps()))))}});d.moment=u,t.exports=d},function(t,e){"document"in window.self&&("classList"in document.createElement("_")?!function(){"use strict";var t=document.createElement("_");if(t.classList.add("c1","c2"),!t.classList.contains("c2")){var e=function(t){var e=DOMTokenList.prototype[t];DOMTokenList.prototype[t]=function(t){var s,n=arguments.length;for(s=0;n>s;s++)t=arguments[s],e.call(this,t)}};e("add"),e("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var s=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,e){return 1 in arguments&&!this.contains(t)==!e?e:s.call(this,t)}}t=null}():!function(t){"use strict";if("Element"in t){var e="classList",s="prototype",n=t.Element[s],r=Object,i=String[s].trim||function(){return this.replace(/^\s+|\s+$/g,"")},a=Array[s].indexOf||function(t){for(var e=0,s=this.length;s>e;e++)if(e in this&&this[e]===t)return e;return-1},o=function(t,e){this.name=t,this.code=DOMException[t],this.message=e},c=function(t,e){if(""===e)throw new o("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(e))throw new o("INVALID_CHARACTER_ERR","String contains an invalid character");return a.call(t,e)},u=function(t){for(var e=i.call(t.getAttribute("class")||""),s=e?e.split(/\s+/):[],n=0,r=s.length;r>n;n++)this.push(s[n]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},l=u[s]=[],d=function(){return new u(this)};if(o[s]=Error[s],l.item=function(t){return this[t]||null},l.contains=function(t){return t+="",-1!==c(this,t)},l.add=function(){var t,e=arguments,s=0,n=e.length,r=!1;do t=e[s]+"",-1===c(this,t)&&(this.push(t),r=!0);while(++s<n);r&&this._updateClassName()},l.remove=function(){var t,e,s=arguments,n=0,r=s.length,i=!1;do for(t=s[n]+"",e=c(this,t);-1!==e;)this.splice(e,1),i=!0,e=c(this,t);while(++n<r);i&&this._updateClassName()},l.toggle=function(t,e){t+="";var s=this.contains(t),n=s?e!==!0&&"remove":e!==!1&&"add";return n&&this[n](t),e===!0||e===!1?e:!s},l.toString=function(){return this.join(" ")},r.defineProperty){var h={get:d,enumerable:!0,configurable:!0};try{r.defineProperty(n,e,h)}catch(p){-2146823252===p.number&&(h.enumerable=!1,r.defineProperty(n,e,h))}}else r[s].__defineGetter__&&n.__defineGetter__(e,d)}}(window.self))},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 n(t){var e=Object.getOwnPropertyNames(t);return Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(t))),e.filter(function(e){return r.call(t,e)})}var r=Object.prototype.propertyIsEnumerable;t.exports=Object.assign||function(t,e){for(var r,i,a=s(t),o=1;o<arguments.length;o++){r=arguments[o],i=n(Object(r));for(var c=0;c<i.length;c++)a[i[c]]=r[i[c]]}return a}},function(e,s){e.exports=t},function(t,e,s){var n=s(3),r=s(5),i=n.DOM,a=n.createClass({render:function(){var t,e=this.renderFooter(),s=this.props.viewDate,n=s.localeData();return t=[i.thead({key:"th"},[i.tr({key:"h"},[i.th({key:"p",className:"prev"},i.button({onClick:this.props.subtractTime(1,"months")},"‹")),i.th({key:"s",className:"switch",onClick:this.props.showView("months"),colSpan:5},n.months(s)+" "+s.year()),i.th({key:"n",className:"next"},i.button({onClick:this.props.addTime(1,"months")},"›"))]),i.tr({key:"d"},this.getDaysOfWeek(n).map(function(t){return i.th({key:t,className:"dow"},t)}))]),i.tbody({key:"tb"},this.renderDays())],e&&t.push(e),i.div({className:"rdtDays"},i.table({},t))},getDaysOfWeek:function(t){var e=t._weekdaysMin,s=t.firstDayOfWeek(),n=[],r=0;return e.forEach(function(t){n[(7+r++-s)%7]=t}),n},renderDays:function(){var t,e,s,n=this.props.viewDate,a=this.props.selectedDate.clone(),o=n.clone().subtract(1,"months"),c=n.year(),u=n.month(),l={y:a.year(),M:a.month(),d:a.date()},d=this.props.minDate,h=this.props.maxDate,p=[],m=[],f=this.props.renderDay||this.renderDay;o.date(o.daysInMonth()).startOf("week");for(var v=o.clone().add(42,"d");o.isBefore(v);)t="day",o.year()<c||o.month()<u?t+=" old":(o.year()>c||o.month()>u)&&(t+=" new"),o.isSame(l)&&(t+=" active"),o.isSame(r(),"day")&&(t+=" today"),e=d&&o.isBefore(d)||h&&o.isAfter(h),e&&(t+=" disabled"),s={key:o.format("M_D"),"data-value":o.date(),className:t},e||(s.onClick=this.props.updateDate),m.push(f(s,o.clone(),a)),7==m.length&&(p.push(i.tr({key:o.format("M_D")},m)),m=[]),o.add(1,"d");return p},renderDay:function(t,e,s){return i.td(t,e.date())},renderFooter:function(){return this.props.timeFormat?i.tfoot({key:"tf"},i.tr({},i.td({onClick:this.props.showView("time"),colSpan:7,className:"timeToggle"},this.props.selectedDate.format(this.props.timeFormat)))):""}});t.exports=a},function(t,s){t.exports=e},function(t,e,s){"use strict";var n=s(3),r=(s(5),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:"prev"},r.button({onClick:this.props.subtractTime(1,"years")},"‹")),r.th({key:"year",className:"switch",onClick:this.props.showView("years"),colSpan:2},this.props.viewDate.year()),r.th({key:"next",className:"next"},r.button({onClick:this.props.addTime(1,"years")},"›"))]))),r.table({key:"months"},r.tbody({key:"b"},this.renderMonths()))])},renderMonths:function(){for(var t,e,s=this.props.selectedDate,n=s.month(),i=this.props.viewDate.year(),a=[],o=0,c=[],u=this.props.renderMonth||this.renderMonth;12>o;)t="month",o===n&&i===s.year()&&(t+=" active"),e={key:o,"data-value":o,className:t,onClick:this.props.setDate("month")},c.push(u(e,o,i,s.clone())),4==c.length&&(a.push(r.tr({key:n+"_"+a.length},c)),c=[]),o++;return a},renderMonth:function(t,e,s,n){return r.td(t,n.localeData()._monthsShort[e])}});t.exports=i},function(t,e,s){"use strict";var n=s(3),r=n.DOM,i=n.createClass({render:function(){var t=10*parseInt(this.props.viewDate.year()/10,10);return r.div({className:"rdtYears"},[r.table({key:"a"},r.thead({},r.tr({},[r.th({key:"prev",className:"prev"},r.button({onClick:this.props.subtractTime(10,"years")},"‹")),r.th({key:"year",className:"switch",onClick:this.props.showView("years"),colSpan:2},t+"-"+(t+9)),r.th({key:"next",className:"next"},r.button({onClick:this.props.addTime(10,"years")},"›"))]))),r.table({key:"years"},r.tbody({},this.renderYears(t)))])},renderYears:function(t){var e,s,n=[],i=-1,a=[],o=this.props.renderYear||this.renderYear;for(t--;11>i;)e="year",-1===i|10===i&&(e+=" old"),this.props.selectedDate.year()===t&&(e+=" active"),s={key:t,"data-value":t,className:e,onClick:this.props.setDate("year")},n.push(o(s,t,this.props.selectedDate.clone())),4==n.length&&(a.push(r.tr({key:i},n)),n=[]),t++,i++;return a},renderYear:function(t,e,s){return r.td(t,e)}});t.exports=i},function(t,e,s){"use strict";var n=s(3),r=n.DOM,i=n.createClass({getInitialState:function(){var t=this.props.selectedDate,e=this.props.timeFormat,s=[];return(-1!=e.indexOf("H")||-1!=e.indexOf("h"))&&(s.push("hours"),-1!=e.indexOf("m")&&(s.push("minutes"),-1!=e.indexOf("s")&&s.push("seconds"))),{hours:t.format("H"),minutes:t.format("mm"),seconds:t.format("ss"),milliseconds:t.format("SSS"),counters:s}},renderCounter:function(t){return r.div({key:t,className:"rdtCounter"},[r.button({key:"up",className:"btn",onMouseDown:this.onStartClicking("increase",t)},"▲"),r.div({key:"c",className:"rdtCount"},this.state[t]),r.button({key:"do",className:"btn",onMouseDown:this.onStartClicking("decrease",t)},"▼")])},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))}),3==this.state.counters.length&&-1!=this.props.timeFormat.indexOf("S")&&(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))))]))},updateMilli:function(t){var e=parseInt(t.target.value);e==t.target.value&&e>=0&&1e3>e&&(this.props.setTime("milliseconds",e),this.setState({milliseconds:e}))},renderHeader:function(){return this.props.dateFormat?r.thead({key:"h"},r.tr({},r.th({colSpan:4,onClick:this.props.showView("days")},this.props.selectedDate.format(this.props.dateFormat)))):""},onStartClicking:function(t,e){var s=this;return function(){var n={};n[e]=s[t](e),s.setState(n),s.timer=setTimeout(function(){s.increaseTimer=setInterval(function(){n[e]=s[t](e),s.setState(n)},80)},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)}},maxValues:{hours:23,minutes:59,seconds:59,milliseconds:999},padValues:{hours:1,minutes:2,seconds:2,milliseconds:3},increase:function(t){var e=parseInt(this.state[t])+1;return e>this.maxValues[t]&&(e=0),this.pad(t,e)},decrease:function(t){var e=parseInt(this.state[t])-1;return 0>e&&(e=this.maxValues[t]),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){var n,r,i;!function(s,a){r=[],n=a,i="function"==typeof n?n.apply(e,r):n,!(void 0!==i&&(t.exports=i))}(this,function(){"use strict";var t=[],e=[],s="ignore-react-onclickoutside";return{componentDidMount:function(){if(!this.handleClickOutside)throw new Error("Component lacks a handleClickOutside(event) function for processing outside click events.");var n=this.__outsideClickHandler=function(t,e){return function(n){for(var r=n.target,i=!1;r.parentNode;){if(i=r===t||r.classList.contains(s))return;r=r.parentNode}e(n)}}(this.getDOMNode(),this.handleClickOutside),r=t.length;t.push(this),e[r]=n,this.props.disableOnClickOutside||this.enableOnClickOutside()},componentWillUnmount:function(){this.disableOnClickOutside(),this.__outsideClickHandler=!1;var s=t.indexOf(this);s>-1&&e[s]&&(e.splice(s,1),t.splice(s,1))},enableOnClickOutside:function(){var t=this.__outsideClickHandler;document.addEventListener("mousedown",t),document.addEventListener("touchstart",t)},disableOnClickOutside:function(t){var t=this.__outsideClickHandler;document.removeEventListener("mousedown",t),document.removeEventListener("touchstart",t)}}})}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require(void 0),require(void 0)):"function"==typeof define&&define.amd?define([,],e):"object"==typeof exports?exports.Datetime=e(require(void 0),require(void 0)):t.Datetime=e(t.React,t.moment)}(this,function(t,e){return function(t){function e(n){if(s[n])return s[n].exports;var r=s[n]={exports:{},id:n,loaded:!1};return t[n].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var s={};return e.m=t,e.c=s,e.p="",e(0)}([function(t,e,s){"use strict";s(1);var n=s(2),r=s(3),i=s(4),a=s(6),o=s(7),c=s(8),u=s(5),l=r.PropTypes,p=r.createClass({mixins:[s(9)],viewComponents:{days:i,months:a,years:o,time:c},propTypes:{value:l.object,defaultValue:l.object,onBlur:l.func,onChange:l.func,locale:l.string,input:l.bool,inputProps:l.object,viewMode:l.oneOf(["years","months","days","time"]),isValidDate:l.func,minDate:l.object,maxDate:l.object},getDefaultProps:function(){var t=function(){};return{className:"",value:!1,defaultValue:new Date,viewMode:"days",inputProps:{},input:!0,onBlur:t,onChange:t,timeFormat:!0,dateFormat:!0}},getInitialState:function(){var t=this.getStateFromProps(this.props);return t.open=!this.props.input,t.currentView=this.props.viewMode,t},getStateFromProps:function(t){var e,s=this.getFormats(t),n=t.value||t.defaultValue;return e="string"==typeof n?this.localMoment(n,s.datetime):this.localMoment(n),{inputFormat:s.datetime,viewDate:this.localMoment(n).startOf("month"),selectedDate:this.localMoment(n),inputValue:this.localMoment(n).format(s.datetime)}},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")),e.time===!0&&(e.time=s.longDateFormat("LT")),e.datetime=e.date+" "+e.time,e},componentWillReceiveProps:function(t){var e=this.getFormats(t),s={};t.value&&(s=this.getStateFromProps(t)),e.datetime!==this.getFormats(this.props).datetime&&(s.inputFormat=e.datetime),this.setState(s)},onInputChange:function(t){var e=null==t.target?t:t.target.value,s=this.localMoment(e,this.state.inputFormat),n={inputValue:e};return s.isValid()&&!this.props.value&&(n.selectedDate=s,n.viewDate=s.clone().startOf("month")),this.setState(n,function(){return s.isValid()?this.props.onChange(s):void 0})},showView:function(t){var e=this;return function(s){e.setState({currentView:t})}},setDate:function(t){var e=this,s={month:"days",year:"months"};return function(n){e.setState({viewDate:e.state.viewDate.clone()[t](parseInt(n.target.getAttribute("data-value"))).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,n){var r=this;return function(){var i={},a=n?"selectedDate":"viewDate";i[a]=r.state[a].clone()[t](e,s),r.setState(i)}},allowedSetTime:["hours","minutes","seconds","milliseconds"],setTime:function(t,e){var s,n=this.allowedSetTime.indexOf(t)+1,r=this.state.selectedDate.clone();for(r[t](e);n<this.allowedSetTime.length;n++)s=this.allowedSetTime[n],r[s](r[s]());this.props.value||this.setState({selectedDate:r,inputValue:r.format(this.state.inputFormat)}),this.props.onChange(r)},updateSelectedDate:function(t){var e,s=t.target,n=0,r=this.state.selectedDate;-1!=s.className.indexOf("new")?n=1:-1!=s.className.indexOf("old")&&(n=-1),e=this.state.viewDate.clone().month(this.state.viewDate.month()+n).date(parseInt(s.getAttribute("data-value"))).hours(r.hours()).minutes(r.minutes()).seconds(r.seconds()).milliseconds(r.milliseconds()),this.props.value||this.setState({selectedDate:e,viewDate:e.clone().startOf("month"),inputValue:e.format(this.state.inputFormat)}),this.props.onChange(e)},openCalendar:function(){this.setState({open:!0})},handleClickOutside:function(){this.props.onBlur(this.state.selectedDate),this.props.input&&this.state.open&&this.setState({open:!1})},localMoment:function(t,e){var s=u(t,e);return this.props.locale&&s.locale(this.props.locale),s},componentProps:{fromProps:["value","isValidDate","renderDay","renderMonth","renderYear"],fromState:["viewDate","selectedDate"],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,i=[];return this.props.input?i=[e.input(n({key:"i",type:"text",className:"form-control",onFocus:this.openCalendar,onChange:this.onInputChange,value:this.state.inputValue},this.props.inputProps))]:s+=" rdtStatic",this.state.open&&(s+=" rdtOpen"),e.div({className:s},i.concat(e.div({key:"dt",className:"rdtPicker"},r.createElement(t,this.getComponentProps()))))}});p.moment=u,t.exports=p},function(t,e){"document"in window.self&&("classList"in document.createElement("_")?!function(){"use strict";var t=document.createElement("_");if(t.classList.add("c1","c2"),!t.classList.contains("c2")){var e=function(t){var e=DOMTokenList.prototype[t];DOMTokenList.prototype[t]=function(t){var s,n=arguments.length;for(s=0;n>s;s++)t=arguments[s],e.call(this,t)}};e("add"),e("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var s=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,e){return 1 in arguments&&!this.contains(t)==!e?e:s.call(this,t)}}t=null}():!function(t){"use strict";if("Element"in t){var e="classList",s="prototype",n=t.Element[s],r=Object,i=String[s].trim||function(){return this.replace(/^\s+|\s+$/g,"")},a=Array[s].indexOf||function(t){for(var e=0,s=this.length;s>e;e++)if(e in this&&this[e]===t)return e;return-1},o=function(t,e){this.name=t,this.code=DOMException[t],this.message=e},c=function(t,e){if(""===e)throw new o("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(e))throw new o("INVALID_CHARACTER_ERR","String contains an invalid character");return a.call(t,e)},u=function(t){for(var e=i.call(t.getAttribute("class")||""),s=e?e.split(/\s+/):[],n=0,r=s.length;r>n;n++)this.push(s[n]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},l=u[s]=[],p=function(){return new u(this)};if(o[s]=Error[s],l.item=function(t){return this[t]||null},l.contains=function(t){return t+="",-1!==c(this,t)},l.add=function(){var t,e=arguments,s=0,n=e.length,r=!1;do t=e[s]+"",-1===c(this,t)&&(this.push(t),r=!0);while(++s<n);r&&this._updateClassName()},l.remove=function(){var t,e,s=arguments,n=0,r=s.length,i=!1;do for(t=s[n]+"",e=c(this,t);-1!==e;)this.splice(e,1),i=!0,e=c(this,t);while(++n<r);i&&this._updateClassName()},l.toggle=function(t,e){t+="";var s=this.contains(t),n=s?e!==!0&&"remove":e!==!1&&"add";return n&&this[n](t),e===!0||e===!1?e:!s},l.toString=function(){return this.join(" ")},r.defineProperty){var d={get:p,enumerable:!0,configurable:!0};try{r.defineProperty(n,e,d)}catch(h){-2146823252===h.number&&(d.enumerable=!1,r.defineProperty(n,e,d))}}else r[s].__defineGetter__&&n.__defineGetter__(e,p)}}(window.self))},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 n(t){var e=Object.getOwnPropertyNames(t);return Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(t))),e.filter(function(e){return r.call(t,e)})}var r=Object.prototype.propertyIsEnumerable;t.exports=Object.assign||function(t,e){for(var r,i,a=s(t),o=1;o<arguments.length;o++){r=arguments[o],i=n(Object(r));for(var c=0;c<i.length;c++)a[i[c]]=r[i[c]]}return a}},function(e,s){e.exports=t},function(t,e,s){var n=s(3),r=s(5),i=n.DOM,a=n.createClass({render:function(){var t,e=this.renderFooter(),s=this.props.viewDate,n=s.localeData();return t=[i.thead({key:"th"},[i.tr({key:"h"},[i.th({key:"p",className:"prev"},i.button({onClick:this.props.subtractTime(1,"months"),type:"button"},"‹")),i.th({key:"s",className:"switch",onClick:this.props.showView("months"),colSpan:5},n.months(s)+" "+s.year()),i.th({key:"n",className:"next"},i.button({onClick:this.props.addTime(1,"months"),type:"button"},"›"))]),i.tr({key:"d"},this.getDaysOfWeek(n).map(function(t){return i.th({key:t,className:"dow"},t)}))]),i.tbody({key:"tb"},this.renderDays())],e&&t.push(e),i.div({className:"rdtDays"},i.table({},t))},getDaysOfWeek:function(t){var e=t._weekdaysMin,s=t.firstDayOfWeek(),n=[],r=0;return e.forEach(function(t){n[(7+r++-s)%7]=t}),n},renderDays:function(){var t,e,s,n,a=this.props.viewDate,o=this.props.selectedDate.clone(),c=a.clone().subtract(1,"months"),u=a.year(),l=a.month(),p={y:o.year(),M:o.month(),d:o.date()},d=(this.props.minDate,this.props.maxDate,[]),h=[],m=this.props.renderDay||this.renderDay,f=this.props.isValidDate||this.isValidDate;c.date(c.daysInMonth()).startOf("week");for(var v=c.clone().add(42,"d");c.isBefore(v);)t="day",n=c.clone(),c.year()<u||c.month()<l?t+=" old":(c.year()>u||c.month()>l)&&(t+=" new"),c.isSame(p)&&(t+=" active"),c.isSame(r(),"day")&&(t+=" today"),e=!f(n,o),e&&(t+=" disabled"),s={key:c.format("M_D"),"data-value":c.date(),className:t},e||(s.onClick=this.props.updateSelectedDate),h.push(m(s,n,o)),7==h.length&&(d.push(i.tr({key:c.format("M_D")},h)),h=[]),c.add(1,"d");return d},renderDay:function(t,e,s){return i.td(t,e.date())},renderFooter:function(){return this.props.timeFormat?i.tfoot({key:"tf"},i.tr({},i.td({onClick:this.props.showView("time"),colSpan:7,className:"timeToggle"},this.props.selectedDate.format(this.props.timeFormat)))):""},isValidDate:function(){return 1}});t.exports=a},function(t,s){t.exports=e},function(t,e,s){"use strict";var n=s(3),r=(s(5),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:"prev"},r.button({onClick:this.props.subtractTime(1,"years"),type:"button"},"‹")),r.th({key:"year",className:"switch",onClick:this.props.showView("years"),colSpan:2},this.props.viewDate.year()),r.th({key:"next",className:"next"},r.button({onClick:this.props.addTime(1,"years"),type:"button"},"›"))]))),r.table({key:"months"},r.tbody({key:"b"},this.renderMonths()))])},renderMonths:function(){for(var t,e,s=this.props.selectedDate,n=s.month(),i=this.props.viewDate.year(),a=[],o=0,c=[],u=this.props.renderMonth||this.renderMonth;12>o;)t="month",o===n&&i===s.year()&&(t+=" active"),e={key:o,"data-value":o,className:t,onClick:this.props.setDate("month")},c.push(u(e,o,i,s.clone())),4==c.length&&(a.push(r.tr({key:n+"_"+a.length},c)),c=[]),o++;return a},renderMonth:function(t,e,s,n){return r.td(t,n.localeData()._monthsShort[e])}});t.exports=i},function(t,e,s){"use strict";var n=s(3),r=n.DOM,i=n.createClass({render:function(){var t=10*parseInt(this.props.viewDate.year()/10,10);return r.div({className:"rdtYears"},[r.table({key:"a"},r.thead({},r.tr({},[r.th({key:"prev",className:"prev"},r.button({onClick:this.props.subtractTime(10,"years"),type:"button"},"‹")),r.th({key:"year",className:"switch",onClick:this.props.showView("years"),colSpan:2},t+"-"+(t+9)),r.th({key:"next",className:"next"},r.button({onClick:this.props.addTime(10,"years"),type:"button"},"›"))]))),r.table({key:"years"},r.tbody({},this.renderYears(t)))])},renderYears:function(t){var e,s,n=[],i=-1,a=[],o=this.props.renderYear||this.renderYear;for(t--;11>i;)e="year",-1===i|10===i&&(e+=" old"),this.props.selectedDate.year()===t&&(e+=" active"),s={key:t,"data-value":t,className:e,onClick:this.props.setDate("year")},n.push(o(s,t,this.props.selectedDate.clone())),4==n.length&&(a.push(r.tr({key:i},n)),n=[]),t++,i++;return a},renderYear:function(t,e,s){return r.td(t,e)}});t.exports=i},function(t,e,s){"use strict";var n=s(3),r=n.DOM,i=n.createClass({getInitialState:function(){return this.calculateState(this.props)},calculateState:function(t){var e=t.selectedDate,s=t.timeFormat,n=[];return(-1!=s.indexOf("H")||-1!=s.indexOf("h"))&&(n.push("hours"),-1!=s.indexOf("m")&&(n.push("minutes"),-1!=s.indexOf("s")&&n.push("seconds"))),{hours:e.format("H"),minutes:e.format("mm"),seconds:e.format("ss"),milliseconds:e.format("SSS"),counters:n}},renderCounter:function(t){return r.div({key:t,className:"rdtCounter"},[r.button({key:"up",className:"btn",onMouseDown:this.onStartClicking("increase",t),type:"button"},"▲"),r.div({key:"c",className:"rdtCount"},this.state[t]),r.button({key:"do",className:"btn",onMouseDown:this.onStartClicking("decrease",t),type:"button"},"▼")])},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))}),3==this.state.counters.length&&-1!=this.props.timeFormat.indexOf("S")&&(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))))]))},componentWillReceiveProps:function(t,e){this.setState(this.calculateState(t))},updateMilli:function(t){var e=parseInt(t.target.value);e==t.target.value&&e>=0&&1e3>e&&(this.props.setTime("milliseconds",e),this.setState({milliseconds:e}))},renderHeader:function(){return this.props.dateFormat?r.thead({key:"h"},r.tr({},r.th({colSpan:4,onClick:this.props.showView("days")},this.props.selectedDate.format(this.props.dateFormat)))):""},onStartClicking:function(t,e){{var s=this;this.state[e]}return function(){var n={};n[e]=s[t](e),s.setState(n),s.timer=setTimeout(function(){s.increaseTimer=setInterval(function(){n[e]=s[t](e),s.setState(n)},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)}},maxValues:{hours:23,minutes:59,seconds:59,milliseconds:999},padValues:{hours:1,minutes:2,seconds:2,milliseconds:3},increase:function(t){var e=parseInt(this.state[t])+1;return e>this.maxValues[t]&&(e=0),this.pad(t,e)},decrease:function(t){var e=parseInt(this.state[t])-1;return 0>e&&(e=this.maxValues[t]),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){var n,r,i;!function(s,a){r=[],n=a,i="function"==typeof n?n.apply(e,r):n,!(void 0!==i&&(t.exports=i))}(this,function(){"use strict";var t=[],e=[],s="ignore-react-onclickoutside";return{componentDidMount:function(){if(!this.handleClickOutside)throw new Error("Component lacks a handleClickOutside(event) function for processing outside click events.");var n=this.__outsideClickHandler=function(t,e){return function(n){for(var r=n.target,i=!1;r.parentNode;){if(i=r===t||r.classList.contains(s))return;r=r.parentNode}e(n)}}(this.getDOMNode(),this.handleClickOutside),r=t.length;t.push(this),e[r]=n,this.props.disableOnClickOutside||this.enableOnClickOutside()},componentWillUnmount:function(){this.disableOnClickOutside(),this.__outsideClickHandler=!1;var s=t.indexOf(this);s>-1&&e[s]&&(e.splice(s,1),t.splice(s,1))},enableOnClickOutside:function(){var t=this.__outsideClickHandler;document.addEventListener("mousedown",t),document.addEventListener("touchstart",t)},disableOnClickOutside:function(t){var t=this.__outsideClickHandler;document.removeEventListener("mousedown",t),document.removeEventListener("touchstart",t)}}})}])});

package.json

 {
   "name": "react-datetime",
-  "version": "0.5.0",
+  "version": "1.0.0-rc.1",
   "description": "A lightweight but complete datetime picker React.js component.",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/arqex/react-datetime",

README.md

@@ -34,13 +34,14 @@ react-datetime
 | ------------ | ------- | ------- | ----------- |
-| **date** | Date  | new Date() | Represents the inital dateTime, this prop is parsed by moment.js, so it is possible to use a date string. |
-| **dateFormat**   | string  | Locale default | Defines the format moment.js should use to parse and output the date. The default is only set if there is not `timeFormat` defined. |
-| **timeFormat**   | string  | Locale default | Defines the format moment.js should use to parse and output the time. The default is only set if there is not `dateFormat` defined. |
+| **value** | Date | new Date() | Represents the value for the compones, in order to use it as a [controlled component](https://facebook.github.io/react/docs/forms.html#controlled-components). This prop is parsed by moment.js, so it is possible to use a date string or a moment.js date. |
+| **defaultValue** | Date | new Date() | Represents the inital value for the component to use it as a [uncontrolled component](https://facebook.github.io/react/docs/forms.html#uncontrolled-components). This prop is parsed by moment.js, so it is possible to use a date string or a moment.js date. |
+| **dateFormat**   | `bool` or `string`  | `true` | Defines the format for the date. It accepts any [moment.js date format](http://momentjs.com/docs/#/displaying/format/). If `true` the date will be displayed using the defaults for the current locale. If `false` the datepicker is disabled and the component can be used as timepicker. |
+| **timeFormat**   | `bool` or `string`  | `true` | Defines the format for the time. It accepts any [moment.js time format](http://momentjs.com/docs/#/displaying/format/). If `true` the time will be displayed using the defaults for the current locale. If `false` the timepicker is disabled and the component can be used as datepicker. |
 | **input** | boolean | true | Wether to show an input field to edit the date manually. |
 | **locale** | string | null | Manually set the locale for the react-datetime instance. Moment.js locale needs to be loaded to be used, see [i18n docs](#i18n).
-| **onChange** | function | empty functin | Callback trigger when the date changes. The callback receives the selected `moment` object as only parameter. |
+| **onChange** | function | empty function | Callback trigger when the date changes. The callback receives the selected `moment` object as only parameter. |
 | **onBlur** | function | empty function | Callback trigger for when the user clicks outside of the input, simulating a regular onBlur. The callback receives the selected `moment` object as only parameter. |
 | **viewMode** | string or number | 'days' | The default view to display when the picker is shown. ('years', 'months', 'days', 'time') |
+| **className** | string | `""` | Extra class names for the component markup. |
 | **inputProps** | object | undefined | Defines additional attributes for the input element of the component. |
-| **minDate** | moment | undefined | The earliest date allowed for entry in the calendar view. |
-| **maxDate** | moment | undefined | The latest date allowed for entry in the calendar view. |
+| **isValidDate** | function | () => true | Define the dates that can be selected. The function receives `(currentDate, selectedDate)` and should return a `true` or `false` whether the `currentDate` is valid or not. See [selectable dates](#selectable-dates).|
 | **renderDay** | function | DOM.td( day ) | Customize the way that the days are shown in the day picker. 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) |
@@ -94,2 +95,27 @@ | **renderMonth** | function | DOM.td( month ) | Customize the way that the months are shown in the month picker. 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) |
 
+## Selectable dates
+It is possible to disable dates in the calendar if we don't want the user to select them. It is possible thanks to the prop `isValidDate`, which admits a function in the form `function( currentDate, selectedDate )` where both arguments are moment.js objects. The function should return `true` for selectable dates, and `false` for disabled ones.
+
+If we want to disable all the dates before today we can do like
+```js
+var valid = function( current ){
+    var limit = new Date(); // Today
+
+    // Yesterday
+    limit.setDate(limit.getDate() - 1);
+
+    // Only dates after yesterday are ok
+    return current > limit;
+};
+<Datetime isValidDate={ valid } />
+```
+
+If we want only odd dates to be valid we could do like
+```js
+var valid = function( current ){
+    return current.date() % 2;
+};
+<Datetime isValidDate={ valid } />
+```
+
 Contributions
@@ -99,2 +125,4 @@ ===============================
 
+### [Changelog](CHANGELOG.md)
+
 ### [MIT Licensed](LICENSE)

src/DaysView.js

@@ -18,5 +18,5 @@ var React = require('react'),
 				DOM.tr({ key: 'h'},[
-					DOM.th({ key: 'p', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(1, 'months')}, '‹')),
+					DOM.th({ key: 'p', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(1, 'months'), type: 'button' }, '‹')),
 					DOM.th({ key: 's', className: 'switch', onClick: this.props.showView('months'), colSpan: 5 }, locale.months( date ) + ' ' + date.year() ),
-					DOM.th({ key: 'n', className: 'next' }, DOM.button({onClick: this.props.addTime(1, 'months')}, '›'))
+					DOM.th({ key: 'n', className: 'next' }, DOM.button({onClick: this.props.addTime(1, 'months'), type: 'button' }, '›'))
 				]),
@@ -67,3 +67,4 @@ DOM.tr({ key: 'd'}, this.getDaysOfWeek( locale ).map( function( day ){ return DOM.th({ key: day, className: 'dow'}, day ); }) )
 			renderer = this.props.renderDay || this.renderDay,
-			classes, disabled, dayProps
+			isValid = this.props.isValidDate || this.isValidDate,
+			classes, disabled, dayProps, currentDate
 		;
@@ -77,2 +78,3 @@
 			classes = 'day';
+			currentDate = prevMonth.clone();
 
@@ -90,3 +92,3 @@ if( prevMonth.year() < currentYear || prevMonth.month() < currentMonth )
 
-			disabled = minDate && prevMonth.isBefore(minDate) || maxDate && prevMonth.isAfter(maxDate);
+			disabled = !isValid( currentDate, selected );
 			if( disabled )
@@ -101,5 +103,5 @@ classes += ' disabled';
 			if( !disabled )
-				dayProps.onClick = this.props.updateDate;
+				dayProps.onClick = this.props.updateSelectedDate;
 
-			days.push( renderer( dayProps, prevMonth.clone(), selected ) );
+			days.push( renderer( dayProps, currentDate, selected ) );
 
@@ -130,5 +132,6 @@ if( days.length == 7 ){
 		);
-	}
+	},
+	isValidDate: function(){ return 1; }
 });
 
 module.exports = DateTimePickerDays;

src/MonthsView.js

@@ -12,5 +12,5 @@ 'use strict';
 			DOM.table({ key: 'a'}, DOM.thead({}, DOM.tr({},[
-				DOM.th({ key: 'prev', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(1, 'years')}, '‹')),
+				DOM.th({ key: 'prev', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(1, 'years'), type: 'button' }, '‹')),
 				DOM.th({ key: 'year', className: 'switch', onClick: this.props.showView('years'), colSpan: 2 }, this.props.viewDate.year() ),
-				DOM.th({ key: 'next', className: 'next' }, DOM.button({onClick: this.props.addTime(1, 'years')}, '›'))
+				DOM.th({ key: 'next', className: 'next' }, DOM.button({onClick: this.props.addTime(1, 'years'), type: 'button' }, '›'))
 			]))),
@@ -17,0 +17,0 @@ DOM.table({ key: 'months'}, DOM.tbody({ key: 'b'}, this.renderMonths()))

src/TimeView.js

@@ -8,4 +8,7 @@ 'use strict';
 	getInitialState: function(){
-		var date = this.props.selectedDate,
-			format = this.props.timeFormat,
+		return this.calculateState( this.props );
+	},
+	calculateState: function( props ){
+		var date = props.selectedDate,
+			format = props.timeFormat,
 			counters = []
@@ -34,5 +37,5 @@ ;
 		return DOM.div({ key: type, className: 'rdtCounter'}, [
-			DOM.button({ key:'up', className: 'btn', onMouseDown: this.onStartClicking( 'increase', type ) }, '▲' ),
+			DOM.button({ key:'up', className: 'btn', onMouseDown: this.onStartClicking( 'increase', type ), type: 'button' }, '▲' ),
 			DOM.div({ key:'c', className: 'rdtCount' }, this.state[ type ] ),
-			DOM.button({ key:'do', className: 'btn', onMouseDown: this.onStartClicking( 'decrease', type ) }, '▼' )
+			DOM.button({ key:'do', className: 'btn', onMouseDown: this.onStartClicking( 'decrease', type ), type: 'button' }, '▼' )
 		]);
@@ -68,4 +71,6 @@ },
 		);
-
 	},
+	componentWillReceiveProps: function( nextProps, nextState ){
+		this.setState( this.calculateState( nextProps ) );
+	},
 	updateMilli: function( e ){
@@ -88,4 +93,6 @@ var milli = parseInt( e.target.value );
 		var me = this,
-			update = {}
+			update = {},
+			value = this.state[ type ]
 		;
+
 		return function(){
@@ -100,3 +107,3 @@ var update = {};
 					me.setState( update );
-				},80);
+				},70);
 			}, 500);
@@ -103,0 +110,0 @@

src/YearsView.js

@@ -12,5 +12,5 @@ 'use strict';
 			DOM.table({ key: 'a'}, DOM.thead({}, DOM.tr({},[
-				DOM.th({ key: 'prev', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(10, 'years')}, '‹')),
+				DOM.th({ key: 'prev', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(10, 'years'), type: 'button' }, '‹')),
 				DOM.th({ key: 'year', className: 'switch', onClick: this.props.showView('years'), colSpan: 2 }, year + '-' + (year + 9) ),
-				DOM.th({ key: 'next', className: 'next'}, DOM.button({onClick: this.props.addTime(10, 'years')}, '›'))
+				DOM.th({ key: 'next', className: 'next'}, DOM.button({onClick: this.props.addTime(10, 'years'), type: 'button' }, '›'))
 				]))),
@@ -17,0 +17,0 @@ DOM.table({ key: 'years'}, DOM.tbody({}, this.renderYears( year )))

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

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

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

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

88927

increased by6.03%

Number of package files

15

increased by7.14%

Lines of code

1052

increased by1.45%

Number of lines in readme file

126

increased by28.57%

No dependency changes