fix: mode='month' a-date-picker disabledDate prop is invalid (#3988)

* fix: mode='month' a-date-picker disabledDate prop is invalid

* chore: code-factory errors

* chore: remove example codes

* fix: the date-picker disabledDate is invalid when mode is year

Author: donley828

components/date-picker/style/YearPanel.less

@@ -46,6 +46,14 @@
 
 .@{calendar-prefix-cls}-year-panel-cell {
   text-align: center;
+  &-disabled .@{calendar-prefix-cls}-year-panel-year {
+    &,
+    &:hover {
+      color: @disabled-color;
+      background: @disabled-bg;
+      cursor: not-allowed;
+    }
+  }
 }
 
 .@{calendar-prefix-cls}-year-panel-year {

components/vc-calendar/src/Calendar.jsx

@@ -325,6 +325,7 @@ const Calendar = {
             locale={locale}
             mode={sMode}
             value={sValue}
+            disabledMonth={disabledDate}
             onValueChange={this.setValue}
             onPanelChange={this.onPanelChange}
             renderFooter={renderFooter}

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

@@ -179,6 +179,7 @@ const CalendarHeader = {
           onSelect={this.onYearSelect}
           onDecadePanelShow={this.showDecadePanel}
           renderFooter={renderFooter}
+          disabledDate={disabledMonth}
         />
       );
     }

components/vc-calendar/src/year/YearPanel.jsx

@@ -28,6 +28,7 @@ export default {
     defaultValue: PropTypes.object,
     locale: PropTypes.object,
     renderFooter: PropTypes.func,
+    disabledDate: PropTypes.func,
   },
   data() {
     this.nextDecade = goYear.bind(this, 10);
@@ -67,18 +68,26 @@ export default {
   },
 
   render() {
-    const { sValue: value, locale, renderFooter } = this;
+    const { sValue: value, locale, renderFooter, $props } = this;
     const decadePanelShow = getListeners(this).decadePanelShow || noop;
     const years = this.years();
     const currentYear = value.year();
     const startYear = parseInt(currentYear / 10, 10) * 10;
     const endYear = startYear + 9;
     const prefixCls = `${this.rootPrefixCls}-year-panel`;
+    const { disabledDate } = $props;
 
     const yeasEls = years.map((row, index) => {
       const tds = row.map(yearData => {
+        let disabled = false;
+        if (disabledDate) {
+          const testValue = value.clone();
+          testValue.year(yearData.year);
+          disabled = disabledDate(testValue);
+        }
         const classNameMap = {
           [`${prefixCls}-cell`]: 1,
+          [`${prefixCls}-cell-disabled`]: disabled,
           [`${prefixCls}-selected-cell`]: yearData.year === currentYear,
           [`${prefixCls}-last-decade-cell`]: yearData.year < startYear,
           [`${prefixCls}-next-decade-cell`]: yearData.year > endYear,
@@ -96,7 +105,7 @@ export default {
             role="gridcell"
             title={yearData.title}
             key={yearData.content}
-            onClick={clickHandler}
+            onClick={disabled ? noop : clickHandler}
             class={classNameMap}
           >
             <a class={`${prefixCls}-year`}>{yearData.content}</a>