使用ant design的時間組件 #MonthPicker日期選擇框# 需求是要起始時間和結(jié)束時間最多范圍是24個月，結(jié)束時間不能超過當(dāng)月。

import React , {useEffect, useState } from 'react';
import {DatePicker} from 'antd';
const moment = require('moment');
const { MonthPicker } = DatePicker;

const DateChoose= (props:IProps)=>{
    const [startMonth,setStartMonth] = useState(moment().subtract(1, 'month'));
  const [endMonth,setEndMonth] = useState(moment());  // 結(jié)束日期默認(rèn)是當(dāng)月

    useEffect(()=>{ // 篩選條件改變 觸發(fā)請求
      console.log('getTableData')
     },[endValue,startValue])
    
   // 按月 - 時間組件 startMonth
  const disabledStartMonth = (startVal) => {
    if (!startVal || !endMonth) {
      // 如果沒有選擇結(jié)束日期，則選擇開始日期時，開始日期不能大于今天
      return startVal.valueOf() > moment().endOf('day');// 禁止選擇本月以后月份
    }
    // 如果選擇了結(jié)束日期，則結(jié)束日期和開始日期之差不能大于24個月,還需要開始日期小于結(jié)束日期，返回true，禁止選擇
    const minus = endMonth.clone().subtract(24, "months");
    return startVal.valueOf() < minus.valueOf() || endMonth.valueOf() <= startVal.valueOf();
  }

  // 按月 - 時間組件 endMonth
  const disabledEndMonth = (endVal) => {
    if (!endVal || !startMonth) {
      // 如果沒有選擇開始日期，則結(jié)束日期時大于今天
      return endVal.valueOf() > moment().endOf('day');// 大于今天的日期一律返回true，禁止選擇
    }
    // 如果選擇了開始日期，則結(jié)束日期和開始日期之差不能大于24個月之外，還需要結(jié)束日期不能小于開始日期，還需要不能超過今天，返回true為不能選擇
    const minus = startMonth.clone().add(24, "months");
    return endVal.valueOf() <= startMonth.valueOf() || endVal.valueOf() > moment().endOf('day') || endVal.valueOf() > minus.valueOf();
  }

  // 按月 - 時間組件 選中開始時間后賦值
  const changeStartMonth = value => {
    setStartMonth(value);
  };

  // 按月 - 時間組件 選中開始時間后賦值
  const changeEndMonth = value => {
    setEndMonth(value);
  };

return (
     <div>
               <MonthPicker
        disabledDate={disabledStartMonth}
        onChange={changeStartMonth}
        value={startMonth}
        placeholder="請選擇開始月份" />
      <span className={styles.lines}>~</span>
      <MonthPicker
        disabledDate={disabledEndMonth}
        onChange={changeEndMonth}
        value={endMonth}
        placeholder="請選擇結(jié)束月份" />
   </div>
)
}

export default DateChoose;