Fixed an issue about the component(RangePicker) could not select the … (#15427)

close #13302

components/date-picker/RangePicker.tsx

@@ -21,14 +21,18 @@ export interface RangePickerState {
   hoverValue?: RangePickerValue;
 }
 
-function getShowDateFromValue(value: RangePickerValue) {
+function getShowDateFromValue(value: RangePickerValue, mode?: string | string[]) {
   const [start, end] = value;
   // value could be an empty array, then we should not reset showDate
   if (!start && !end) {
     return;
   }
+  if (mode && mode[0] === 'month') {
+    return [start, end] as RangePickerValue;
+  } else {
     const newEnd = end && end.isSame(start, 'month') ? end.clone().add(1, 'month') : end;
     return [start, newEnd] as RangePickerValue;
+  }
 }
 
 function pickerValueAdapter(
@@ -83,7 +87,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
       if (!shallowequal(nextProps.value, prevState.value)) {
         state = {
           ...state,
-          showDate: getShowDateFromValue(value) || prevState.showDate,
+          showDate: getShowDateFromValue(value, nextProps.mode) || prevState.showDate,
         };
       }
     }

components/date-picker/__tests__/RangePicker.test.js

@@ -319,4 +319,72 @@ describe('RangePicker', () => {
     const wrapper = mount(<RangePicker separator="test" />);
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  // https://github.com/ant-design/ant-design/issues/13302
+  describe('in "month" mode, when the left and right panels select the same month', () => {
+    it('left panel and right panel could be the same month', () => {
+      const wrapper = mount(<RangePicker mode={['month', 'month']} />);
+      wrapper.setProps({ value: [moment(), moment()] });
+      expect(
+        wrapper
+          .find('.ant-calendar-range-picker-input')
+          .first()
+          .getDOMNode().value,
+      ).toBe(
+        wrapper
+          .find('.ant-calendar-range-picker-input')
+          .last()
+          .getDOMNode().value,
+      );
+    });
+
+    it('the cell status is correct', () => {
+      const wrapper = mount(<RangePicker mode={['month', 'month']} />);
+      wrapper.find('.ant-calendar-picker-input').simulate('click');
+      wrapper
+        .find('.ant-calendar-range-left .ant-calendar-month-panel-cell')
+        .at(3)
+        .simulate('click');
+      wrapper
+        .find('.ant-calendar-range-right .ant-calendar-month-panel-cell')
+        .at(3)
+        .simulate('click');
+      expect(
+        wrapper
+          .find('.ant-calendar-range-left .ant-calendar-month-panel-cell')
+          .at(3)
+          .hasClass('ant-calendar-month-panel-selected-cell'),
+      ).toBe(true);
+      expect(
+        wrapper
+          .find('.ant-calendar-range-left .ant-calendar-month-panel-cell')
+          .at(3)
+          .hasClass('ant-calendar-month-panel-selected-cell'),
+      ).toBe(true);
+      expect(
+        wrapper
+          .find('.ant-calendar-range-left .ant-calendar-month-panel-cell')
+          .at(2)
+          .hasClass('ant-calendar-month-panel-cell-disabled'),
+      ).toBe(false);
+      expect(
+        wrapper
+          .find('.ant-calendar-range-left .ant-calendar-month-panel-cell')
+          .at(4)
+          .hasClass('ant-calendar-month-panel-cell-disabled'),
+      ).toBe(true);
+      expect(
+        wrapper
+          .find('.ant-calendar-range-right .ant-calendar-month-panel-cell')
+          .at(2)
+          .hasClass('ant-calendar-month-panel-cell-disabled'),
+      ).toBe(true);
+      expect(
+        wrapper
+          .find('.ant-calendar-range-right .ant-calendar-month-panel-cell')
+          .at(4)
+          .hasClass('ant-calendar-month-panel-cell-disabled'),
+      ).toBe(false);
+    });
+  });
 });

package.json

@@ -57,7 +57,7 @@
     "prop-types": "^15.6.2",
     "raf": "^3.4.0",
     "rc-animate": "^2.5.4",
-    "rc-calendar": "~9.10.3",
+    "rc-calendar": "~9.11.0",
     "rc-cascader": "~0.17.0",
     "rc-checkbox": "~2.1.5",
     "rc-collapse": "~1.11.1",