fix: left and right arrows of MonthPicker cannot be worked #1543

components/vc-calendar/src/calendar/CalendarHeader.jsx

@@ -70,6 +70,14 @@ const CalendarHeader = {
       this.__emit('valueChange', value);
     },
 
+    changeYear(direction) {
+      if (direction > 0) {
+        this.nextYear();
+      } else {
+        this.previousYear();
+      }
+    },
+
     monthYearElement(showTimePicker) {
       const props = this.$props;
       const prefixCls = props.prefixCls;
@@ -158,6 +166,7 @@ const CalendarHeader = {
           cellRender={props.monthCellRender}
           contentRender={props.monthCellContentRender}
           renderFooter={renderFooter}
+          changeYear={this.changeYear}
         />
       );
     }

components/vc-calendar/src/month/MonthPanel.jsx

@@ -4,9 +4,7 @@ import { hasProp } from '../../../_util/props-util';
 import MonthTable from './MonthTable';
 
 function goYear(direction) {
-  const next = this.sValue.clone();
+  this.changeYear(direction);
-  next.add(direction, 'year');
-  this.setAndChangeValue(next);
 }
 
 function noop() {}
@@ -25,6 +23,7 @@ const MonthPanel = {
     disabledDate: PropTypes.func,
     // onSelect: PropTypes.func,
     renderFooter: PropTypes.func,
+    changeYear: PropTypes.func.def(noop),
   },
 
   data() {
@@ -44,18 +43,13 @@ const MonthPanel = {
     },
   },
   methods: {
-    setAndChangeValue(value) {
-      this.setValue(value);
-      this.__emit('change', value);
-    },
-
     setAndSelectValue(value) {
       this.setValue(value);
       this.__emit('select', value);
     },
 
     setValue(value) {
-      if (!hasProp(this, 'value')) {
+      if (hasProp(this, 'value')) {
         this.setState({
           sValue: value,
         });