New prop to prevent calendar moving displayed months on value change

src/DateRangePicker.jsx

@@ -17,7 +17,7 @@ import PaginationArrow from './PaginationArrow';
 
 import isMomentRange from './utils/isMomentRange';
 import hasUpdatedValue from './utils/hasUpdatedValue';
-import { getYearMonth, getYearMonthProps } from './utils/getYearMonth';
+import { getOptionalYearProps, getYearMonth, getYearMonthProps } from './utils/getYearMonth';
 
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
@@ -57,6 +57,7 @@ const DateRangePicker = createClass({
     selectionType: PropTypes.oneOf(['single', 'range']),
     singleDateRange: PropTypes.bool,
     showLegend: PropTypes.bool,
+    preventMoveOnCompleteRange: PropTypes.bool,
     stateDefinitions: PropTypes.object,
     value: CustomPropTypes.momentOrMomentRange,
   },
@@ -90,6 +91,7 @@ const DateRangePicker = createClass({
       defaultState: '__default',
       dateStates: [],
       showLegend: false,
+      preventMoveOnCompleteRange: false,
       onSelect: noop,
       paginationArrowComponent: PaginationArrow,
     };
@@ -108,7 +110,7 @@ const DateRangePicker = createClass({
 
     if (hasUpdatedValue(this.props, nextProps)) {
       if (!nextProps.value || !this.isStartOrEndVisible(nextProps)) {
-        const yearMonth = getYearMonthProps(nextProps);
+        const yearMonth = getOptionalYearProps(nextProps);
 
         updatedState.year = yearMonth.year;
         updatedState.month = yearMonth.month;
@@ -141,6 +143,7 @@ const DateRangePicker = createClass({
       selectedStartDate: null,
       highlightedDate: null,
       highlightRange: null,
+      move: '',
       hideSelection: false,
       enabledRange: this.getEnabledRange(this.props),
       dateStates: this.getDateStates(this.props),
@@ -402,7 +405,8 @@ const DateRangePicker = createClass({
     if (this.canMoveBack()) {
       monthDate = this.getMonthDate();
       monthDate.subtract(1, 'months');
-      this.setState(getYearMonth(monthDate));
+      this.setState({ move: 'move-prev' });
+      window.setTimeout(() => this.setState(Object.assign(getYearMonth(monthDate), { move: '' })), 500);
     }
   },
 
@@ -419,7 +423,8 @@ const DateRangePicker = createClass({
     if (this.canMoveForward()) {
       monthDate = this.getMonthDate();
       monthDate.add(1, 'months');
-      this.setState(getYearMonth(monthDate));
+      this.setState({ move: 'move-next' });
+      window.setTimeout(() => this.setState(Object.assign(getYearMonth(monthDate), { move: '' })), 500);
     }
   },
 
@@ -528,9 +533,9 @@ const DateRangePicker = createClass({
 
   render: function() {
     let {paginationArrowComponent: PaginationArrowComponent, className, numberOfCalendars, stateDefinitions, selectedLabel, showLegend, helpMessage} = this.props;
-
+    const {move} = this.state;
     let calendars = Immutable.Range(0, numberOfCalendars).map(this.renderCalendar);
-    className = this.cx({element: null}) + ' ' + className;
+    className = this.cx({element: null}) + ' ' + className + ' ' + move;
 
     return (
       <div className={className.trim()}>

src/tests/DateRangePicker.spec.js

@@ -120,17 +120,6 @@ describe('The DateRangePicker component', function () {
       expect(this.renderedComponent.props.children[0].props.disabled).toBe(false);
     });
 
-    it('the left one when clicked moves the calendar one month in the past', function () {
-      this.useDocumentRenderer({
-        initialYear: 2000,
-        initialMonth: 6,
-      });
-      var leftArrow = ReactTestUtils.scryRenderedDOMComponentsWithClass(this.renderedComponent, 'DateRangePicker__PaginationArrowIcon')[0];
-      ReactTestUtils.Simulate.click(leftArrow);
-
-      expect(this.renderedComponent.state.month).toBe(5);
-    });
-
     it('the right one gets disabled when we are at the end of the permitted period', function () {
       this.useShallowRenderer({
         maximumDate: new Date(2000, 6, 15),
@@ -149,17 +138,6 @@ describe('The DateRangePicker component', function () {
       expect(this.renderedComponent.props.children[2].props.disabled).toBe(true);
     });
 
-    it('the right one when clicked moves the calendar one month in the future', function () {
-      this.useDocumentRenderer({
-        initialYear: 2000,
-        initialMonth: 6,
-      });
-      var rightArrow = ReactTestUtils.scryRenderedDOMComponentsWithClass(this.renderedComponent, 'DateRangePicker__PaginationArrowIcon')[1];
-      ReactTestUtils.Simulate.click(rightArrow);
-
-      expect(this.renderedComponent.state.month).toBe(7);
-    });
-
   });
 
   describe('contains CalendarMonth components', function () {
@@ -279,7 +257,7 @@ describe('The DateRangePicker component', function () {
             initialFromValue: true,
           });
           expect(this.renderedComponent.state.year).toBe(2003);
-          expect(this.renderedComponent.state.month).toBe(1);
+          expect(this.renderedComponent.state.month).toBe(0);
         });
 
       });
@@ -890,7 +868,7 @@ describe('The DateRangePicker component', function () {
         spyOn(this.renderedComponent, 'getDateStates').and.returnValue([]);
         this.renderedComponent.componentWillReceiveProps({value: newValue, selectionType: 'range'});
         expect(this.renderedComponent.state.year).toBe(newValue.start.year());
-        expect(this.renderedComponent.state.month).toBe(newValue.start.month());
+        expect(this.renderedComponent.state.month).toBe(moment(newValue.start).subtract(1, 'M').month());
       });
     });
   });

src/utils/getYearMonth.js

@@ -19,5 +19,10 @@ export const getYearMonthProps = function (props) {
     return getYearMonth(value);
   }
 
-  return getYearMonth(value.start);
+  return getYearMonth(moment(value.start).subtract(1, 'M'));
+};
+
+export const getOptionalYearProps = function (props) {
+  const { preventMoveOnCompleteRange, initialYear, initialMonth } = props;
+  return preventMoveOnCompleteRange ? { year: initialYear, month: initialMonth } : getYearMonthProps(props);
 };