用onCalendarChange和disabledDate来动态限制日期区间的选择
const [dates, setDates] = useState(null);
const [value, setValue] = useState(null);
const disabledDate = (current) => {
if (!dates) {
// return false; //如果默认时没有限制直接return false;
// return current && current < moment().endOf('day'); //默认时禁止选择当天之前的日期
return current && current > moment().subtract(1, 'days'); //这里表示默认时需要禁止选择当天即当天之后的日期
}
const tooLate = dates[0] && current.diff(dates[0], 'days') > 7;
const tooEarly = dates[1] && dates[1].diff(current, 'days') > 7;
return (current && current > moment().subtract(1, 'days')) || !!tooEarly || !!tooLate; //选择日期后,禁用条件:禁止选择当天及当天之后的日期或者选中日期前后超过7天的日期
};
const onOpenChange = (open) => {
if (open) {
setDates([null, null]);
} else {
setDates(null);
}
};
return (
<RangePicker
value={dates || value}
disabledDate={disabledDate}
onCalendarChange={(val) => setDates(val)}
onChange={(val) => setValue(val)}
onOpenChange={onOpenChange} //可不添加
/>
);