Merge branch 'podio-feature/close-on-date-selection'

DateTime.js

@@ -23,6 +23,7 @@ var Datetime = React.createClass({
 	propTypes: {
 		// value: TYPES.object | TYPES.string,
 		// defaultValue: TYPES.object | TYPES.string,
+		closeOnSelect: TYPES.bool,
 		onBlur: TYPES.func,
 		onChange: TYPES.func,
 		locale: TYPES.string,
@@ -217,7 +218,7 @@ var Datetime = React.createClass({
 		this.props.onChange( date );
 	},
 
-	updateSelectedDate: function( e ) {
+	updateSelectedDate: function( e, close ) {
 		var target = e.target,
 			modifier = 0,
 			viewDate = this.state.viewDate,
@@ -244,6 +245,10 @@ var Datetime = React.createClass({
 				selectedDate: date,
 				viewDate: date.clone().startOf('month'),
 				inputValue: date.format( this.state.inputFormat )
+			}, function () {
+				if (this.props.closeOnSelect && close) {
+					this.closeCalendar();
+				}
 			});
 		}
 
@@ -254,6 +259,10 @@ var Datetime = React.createClass({
 		this.setState({ open: true });
 	},
 
+	closeCalendar: function() {
+		this.setState({ open: false });
+	},
+
 	handleClickOutside: function(){
 		if( this.props.input && this.state.open && !this.props.open ){
 			this.setState({ open: false });

README.md

@@ -61,6 +61,7 @@ API
 | **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, the `month` and the `year` to be shown, and must return a React component. See [appearance customization](#appearance-customization) |
 | **renderYear** | function | DOM.td( year ) | Customize the way that the years are shown in the year picker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, the `year` to be shown, and must return a React component. See [appearance customization](#appearance-customization) |
 | **strictParsing** | boolean | false | Whether to use moment's [strict parsing](http://momentjs.com/docs/#/parsing/string-format/) when parsing input.
+| **closeOnSelect** | boolean | false | When `true`, once the day has been selected, the react-datetime will be automatically closed.
 
 ## i18n
 Different language and date formats are supported by react-datetime. React uses [moment.js](http://momentjs.com/) to format the dates, and the easiest way of changing the language of the calendar is [changing the moment.js locale](http://momentjs.com/docs/#/i18n/changing-locale/).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-datetime",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A lightweight but complete datetime picker React.js component.",
   "homepage": "https://github.com/arqex/react-datetime",
   "repository": {

src/DaysView.js

@@ -93,7 +93,7 @@ var DateTimePickerDays = React.createClass({
 				className: classes
 			};
 			if( !disabled )
-				dayProps.onClick = this.props.updateSelectedDate;
+				dayProps.onClick = this.updateSelectedDate;
 
 			days.push( renderer( dayProps, currentDate, selected ) );
 
@@ -108,6 +108,10 @@ var DateTimePickerDays = React.createClass({
 		return weeks;
 	},
 
+	updateSelectedDate: function( event ) {
+		this.props.updateSelectedDate(event, true);
+	},
+
 	renderDay: function( props, currentDate, selectedDate ){
 		return DOM.td( props, currentDate.date() );
 	},