Add onViewDateChange callback when the user changes the currently viewed date

DateTime.d.ts

@@ -98,6 +98,11 @@ declare namespace ReactDatetimeClass {
          string ('years', 'months', 'days', 'time') as only parameter.
          */
         onViewModeChange?: (viewMode: string) => void;
+        /*
+         Callback trigger when the view date changes. The callback receives the current view date 
+         moment as only parameter.
+         */
+        onViewDateChange?: (viewDate: Moment) => void;
         /*
          The default view to display when the picker is shown. ('years', 'months', 'days', 'time')
          */

DateTime.js

@@ -25,6 +25,7 @@ var Datetime = createClass({
 		onBlur: TYPES.func,
 		onChange: TYPES.func,
 		onViewModeChange: TYPES.func,
+		onViewDateChange: TYPES.func,
 		locale: TYPES.string,
 		utc: TYPES.bool,
 		input: TYPES.bool,
@@ -138,6 +139,11 @@ var Datetime = createClass({
 		return formats;
 	},
 
+	componentDidUpdate: function( lastProps, lastState ) {
+		if ( lastState.viewDate !== this.state.viewDate && !lastState.viewDate.isSame( this.state.viewDate ) )
+			this.props.onViewDateChange( this.state.viewDate );
+	},
+
 	componentWillReceiveProps: function( nextProps ) {
 		var formats = this.getFormats( nextProps ),
 			updatedState = {}

README.md

@@ -54,6 +54,7 @@ render: function() {
 | **onFocus** | `function` | empty function | Callback trigger for when the user opens the datepicker. The callback receives an event of type SyntheticEvent. |
 | **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 the date in the input is not valid, the callback returned. |
 | **onViewModeChange** | `function` | empty function | Callback trigger when the view mode changes. The callback receives the selected view mode string (`years`, `months`, `days` or `time`) as only parameter.|
+| **onViewDateChange** | `function` | empty function | Callback trigger for when the user changes the currently viewed date. The callback receives the current view date `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` or `string array` | `''` | Extra class name for the outermost markup element. |
 | **inputProps** | `object` | `undefined` | Defines additional attributes for the input element of the component. For example: `onClick`, `placeholder`, `disabled`, `required`, `name` and `className` (`className` *sets* the class attribute for the input element). See [Customize the Input Appearance](#customize-the-input-appearance). |

src/MonthsView.js

@@ -82,7 +82,7 @@ var DateTimePickerMonths = onClickOutside( createClass({
 	},
 
 	renderMonth: function( props, month ) {
-		var localMoment = this.props.viewDate;
+		var localMoment = this.props.viewDate.clone();
 		var monthStr = localMoment.localeData().monthsShort( localMoment.month( month ) );
 		var strLength = 3;
 		// Because some months are up to 5 characters long, we want to

test/tests.spec.js

@@ -1004,6 +1004,72 @@ describe('Datetime', () => {
 			});
 		});
 
+		describe('onViewDateChange', () => {
+			it('when increase month', () => {
+				const date = new Date(2000, 0, 15, 2, 2, 2, 2),
+					mDate = moment(date),
+					onViewDateChangeFn = jest.fn(),
+					component = utils.createDatetime({ defaultValue: date, onViewDateChange: onViewDateChangeFn });
+
+				utils.clickOnElement(component.find('.rdtNext span').at(0));
+				expect(onViewDateChangeFn).toHaveBeenCalledTimes(1);
+				expect(onViewDateChangeFn.mock.calls[0][0].isSame(mDate.startOf('month').add(1, 'month'))).toBeTruthy();
+			});
+
+			it('when decrease month', () => {
+				const date = new Date(2000, 0, 15, 2, 2, 2, 2),
+					mDate = moment(date),
+					onViewDateChangeFn = jest.fn(),
+					component = utils.createDatetime({ defaultValue: date, onViewDateChange: onViewDateChangeFn });
+
+				utils.clickOnElement(component.find('.rdtPrev span').at(0));
+				expect(onViewDateChangeFn).toHaveBeenCalledTimes(1);
+				expect(onViewDateChangeFn.mock.calls[0][0].isSame(mDate.startOf('month').subtract(1, 'month'))).toBeTruthy();
+			});
+
+			it('when pick month in picker', () => {
+				const date = new Date(2000, 0, 15, 2, 2, 2, 2),
+					mDate = moment(date),
+					onViewDateChangeFn = jest.fn(),
+					component = utils.createDatetime({ defaultValue: date, viewMode: 'months', onViewDateChange: onViewDateChangeFn });
+
+				utils.clickNthMonth(component, 5);
+				expect(onViewDateChangeFn).toHaveBeenCalledTimes(1);
+				expect(onViewDateChangeFn.mock.calls[0][0].isSame(mDate.startOf('month').add(5, 'month'))).toBeTruthy();
+			});
+
+			it('when pick same month in picker', () => {
+				const date = new Date(2000, 0, 15, 2, 2, 2, 2),
+					onViewDateChangeFn = jest.fn(),
+					component = utils.createDatetime({ defaultValue: date, viewMode: 'months', onViewDateChange: onViewDateChangeFn });
+
+				utils.clickNthMonth(component, 0);
+				expect(onViewDateChangeFn).not.toHaveBeenCalled();
+			});
+
+			it('when next is clicked in month view', () => {
+				const date = new Date(2000, 0, 15, 2, 2, 2, 2),
+					mDate = moment(date),
+					onViewDateChangeFn = jest.fn(),
+					component = utils.createDatetime({ defaultValue: date, viewMode: 'months', onViewDateChange: onViewDateChangeFn });
+
+				utils.clickOnElement(component.find('.rdtNext span').at(0));
+				expect(onViewDateChangeFn).toHaveBeenCalledTimes(1);
+				expect(onViewDateChangeFn.mock.calls[0][0].isSame(mDate.startOf('year').add(1, 'year'))).toBeTruthy();
+			});
+
+			it('when prev is clicked in month view', () => {
+				const date = new Date(2000, 0, 15, 2, 2, 2, 2),
+					mDate = moment(date),
+					onViewDateChangeFn = jest.fn(),
+					component = utils.createDatetime({ defaultValue: date, viewMode: 'months', onViewDateChange: onViewDateChangeFn });
+
+				utils.clickOnElement(component.find('.rdtPrev span').at(0));
+				expect(onViewDateChangeFn).toHaveBeenCalledTimes(1);
+				expect(onViewDateChangeFn.mock.calls[0][0].isSame(mDate.startOf('year').subtract(1, 'year'))).toBeTruthy();
+			});
+		});
+
 		describe('onChange', () => {
 			it('trigger only when last selection type is selected', () => {
 				// By selection type I mean if you CAN select day, then selecting a month