使用ant design的時(shí)間組件 #MonthPicker日期選擇框# 需求是要起始時(shí)間和結(jié)束時(shí)間最多范圍是24個(gè)月屹徘，結(jié)束時(shí)間不能超過(guò)當(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ā)請(qǐng)求
console.log('getTableData')
},[endValue,startValue])
// 按月 - 時(shí)間組件 startMonth
const disabledStartMonth = (startVal) => {
if (!startVal || !endMonth) {
// 如果沒有選擇結(jié)束日期，則選擇開始日期時(shí)噪伊，開始日期不能大于今天
return startVal.valueOf() > moment().endOf('day');// 禁止選擇本月以后月份
}
// 如果選擇了結(jié)束日期簿煌，則結(jié)束日期和開始日期之差不能大于24個(gè)月,還需要開始日期小于結(jié)束日期氮唯，返回true，禁止選擇
const minus = endMonth.clone().subtract(24, "months");
return startVal.valueOf() < minus.valueOf() || endMonth.valueOf() <= startVal.valueOf();
}
// 按月 - 時(shí)間組件 endMonth
const disabledEndMonth = (endVal) => {
if (!endVal || !startMonth) {
// 如果沒有選擇開始日期姨伟，則結(jié)束日期時(shí)大于今天
return endVal.valueOf() > moment().endOf('day');// 大于今天的日期一律返回true惩琉，禁止選擇
}
// 如果選擇了開始日期，則結(jié)束日期和開始日期之差不能大于24個(gè)月之外授滓，還需要結(jié)束日期不能小于開始日期琳水，還需要不能超過(guò)今天，返回true為不能選擇
const minus = startMonth.clone().add(24, "months");
return endVal.valueOf() <= startMonth.valueOf() || endVal.valueOf() > moment().endOf('day') || endVal.valueOf() > minus.valueOf();
}
// 按月 - 時(shí)間組件 選中開始時(shí)間后賦值
const changeStartMonth = value => {
setStartMonth(value);
};
// 按月 - 時(shí)間組件 選中開始時(shí)間后賦值
const changeEndMonth = value => {
setEndMonth(value);
};
return (
<div>
<MonthPicker
disabledDate={disabledStartMonth}
onChange={changeStartMonth}
value={startMonth}
placeholder="請(qǐng)選擇開始月份" />
<span className={styles.lines}>~</span>
<MonthPicker
disabledDate={disabledEndMonth}
onChange={changeEndMonth}
value={endMonth}
placeholder="請(qǐng)選擇結(jié)束月份" />
</div>
)
}
export default DateChoose;
