antd RangePicker mode = "year" 年份选择

Antd3版本下的时间选择组件没有年份区间选择，设置mode={['year', 'year']}的RangePicker，无法识别前后的disable,因此通过元素样式的方式来处理disable,实现开始年份不能大于结束年份的不可选状态。

RangePicker 组件

<RangePicker
    placeholder={['开始年度', '结束年度']}
    format="YYYY"
    allowClear={false}
    // open={panelOpen}
    mode={['year', 'year']}
    onPanelChange={handlePanelChange}
    onOpenChange={handleOpenChange}
 />,

处理开始年份不能大于结束年份 disable

 const startDisabled = () => {
    const year = getFieldValue('selectYear');
    const table = document.getElementsByClassName('ant-calendar-year-panel-tbody');
    // 所有开始年份
    const startList = table[0].querySelectorAll('td');
    startList.forEach((item) => {
      if (item.innerText > moment(year[1]).format('YYYY')) {
        item.setAttribute('class', 'year-disabled');
      } else {
        item.classList.remove('year-disabled');
      }
    });
  };
  const endDisabled = () => {
    const year = getFieldValue('selectYear');
    const table = document.getElementsByClassName('ant-calendar-year-panel-tbody');
    // 所有结束年份
    const endList = table[1].querySelectorAll('td');
    endList.forEach((item) => {
      if (item.innerText < moment(year[0]).format('YYYY')) {
        item.setAttribute('class', 'year-disabled');
      } else {
        item.classList.remove('year-disabled');
      }
    });
  };

  // 翻页
  const yearPanelPageChange = () => {
    const nextBtn = document.querySelectorAll('.ant-calendar-year-panel-next-decade-btn');
    const prevBtn = document.querySelectorAll('.ant-calendar-year-panel-prev-decade-btn');
    const table = document.getElementsByClassName('ant-calendar-year-panel-tbody');
    // 处理四个角的点击翻页
    const preFirstYear = table[0]?.querySelectorAll('td')[0];
    const preLastYear = table[0]?.querySelectorAll('td')[11];
    const nextFirstYear = table[1]?.querySelectorAll('td')[0];
    const nextLastYear = table[1]?.querySelectorAll('td')[11];

    const addClick = (domList) => {
      domList.forEach((Dom) => {
        Dom.addEventListener('click', () => {
          setTimeout(() => {
            endDisabled();
            startDisabled();
            yearPanelPageChange();
          });
        });
      });
    };
    addClick(nextBtn);
    addClick(prevBtn);
    addClick([preFirstYear, preLastYear, nextFirstYear, nextLastYear]);
  };
  const handleOpenChange = () => {
    // setPanelOpen(status);
    setTimeout(() => {
      endDisabled();
      startDisabled();
      yearPanelPageChange();
    });
  };
  const handlePanelChange = (date) => {
    if (moment(date[0]).format('YYYY') <= moment(date[1]).format('YYYY')) {
      setFieldsValue({ selectYear: date });
    }
    setTimeout(() => {
      endDisabled();
      startDisabled();
    });
    // setPanelOpen(false);
  };

添加 disable 样式

.year-disabled {
    pointer-events: none;
    cursor: not-allowed;
    a {
      color: rgba(0, 0, 0, 0.25);
      background: #f5f5f5;
    }
  }