使用ant design的时间组件 #MonthPicker日期选择框# 需求是要起始时间和结束时间最多范围是24个月,结束时间不能超过当月。
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()); // 结束日期默认是当月
useEffect(()=>{ // 筛选条件改变 触发请求
console.log('getTableData')
},[endValue,startValue])
// 按月 - 时间组件 startMonth
const disabledStartMonth = (startVal) => {
if (!startVal || !endMonth) {
// 如果没有选择结束日期,则选择开始日期时,开始日期不能大于今天
return startVal.valueOf() > moment().endOf('day');// 禁止选择本月以后月份
}
// 如果选择了结束日期,则结束日期和开始日期之差不能大于24个月,还需要开始日期小于结束日期,返回true,禁止选择
const minus = endMonth.clone().subtract(24, "months");
return startVal.valueOf() < minus.valueOf() || endMonth.valueOf() <= startVal.valueOf();
}
// 按月 - 时间组件 endMonth
const disabledEndMonth = (endVal) => {
if (!endVal || !startMonth) {
// 如果没有选择开始日期,则结束日期时大于今天
return endVal.valueOf() > moment().endOf('day');// 大于今天的日期一律返回true,禁止选择
}
// 如果选择了开始日期,则结束日期和开始日期之差不能大于24个月之外,还需要结束日期不能小于开始日期,还需要不能超过今天,返回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="请选择结束月份" />
</div>
)
}
export default DateChoose;