Merge branch 'romainberger-onfocus'

Author: arqex

DateTime.js

@@ -24,6 +24,7 @@ var Datetime = React.createClass({
 		// value: TYPES.object | TYPES.string,
 		// defaultValue: TYPES.object | TYPES.string,
 		closeOnSelect: TYPES.bool,
+		onFocus: TYPES.func,
 		onBlur: TYPES.func,
 		onChange: TYPES.func,
 		locale: TYPES.string,
@@ -45,6 +46,7 @@ var Datetime = React.createClass({
 			viewMode: 'days',
 			inputProps: {},
 			input: true,
+			onFocus: nof,
 			onBlur: nof,
 			onChange: nof,
 			timeFormat: true,
@@ -256,7 +258,10 @@ var Datetime = React.createClass({
 	},
 
 	openCalendar: function() {
-		this.setState({ open: true });
+		if (!this.state.open) {
+			this.props.onFocus();
+			this.setState({ open: true });
+		}
 	},
 
 	closeCalendar: function() {

README.md

@@ -52,6 +52,7 @@ API
 | **open** | boolean | null | Wether to open or close the picker. If not set react-datetime will open the datepicker on input focus and close it on click outside. |
 | **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 function | Callback trigger when the date changes. The callback receives the selected `moment` object as only parameter, if the date in the input is valid. If it isn't, the value of the input (a string) is returned. |
+| **onFocus** | function | empty function | Callback trigger for when the user opens the datepicker. |
 | **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, if the date in the input is valid. If it isn't, the value of the input (a string) is returned. |
 | **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. |

tests/datetime-spec.js

@@ -453,6 +453,16 @@ describe( 'Datetime', function(){
 		ev.click( dt.day( 4 ) );
 	});
 
+	it( 'onFocus', function(){
+		var focus = false;
+		createDatetime({ value: date, onFocus: function( selected ){
+			focus = true;
+		}});
+
+		ev.focus( dt.input() );
+		assert.equal( focus, true );
+	});
+
 	it( 'onBlur', function(){
 		createDatetime({ value: date, onBlur: function( selected ){
 			assert.equal( dt.dt().className.indexOf( 'rdtOpen' ), -1 );