最近公司很多项目都有关于日期的限制
用得最多的是禁止选择今天之后的日期
其次是选择的日期跨度为30天,365天等,
这里以时间跨度一年为例写一个Demo
<Form
form={form}
layout="inline"
initialValues={default_Params}
onValuesChange={onValuesChange}
>
<Form.Item
label="统计时间"
name="time"
rules={[{ required: true, message: '请选择日期' }]}
>
<RangePicker
format="YYYY-MM-DD"
placeholder={['START DATE', 'END DATE']}
disabledDate={disabledDate}
onCalendarChange={(val) => setDates(val)}
onOpenChange={onOpenChange}
/>
</Form.Item>
</Form>
// 限制动态日期区间选择,时间跨度不超过一年且今天之后日期置灰
const [dates, setDates] = useState(null);
// 禁用
const disabledDate = (current) => {
if (dates) {
const tooLate = dates[0] && current.diff(dates[0], 'days') > 365;
const tooEarly = dates[1] && dates[1].diff(current, 'days') > 365;
return (
!!tooEarly || !!tooLate || (current && current > moment().endOf('day'))
);
}
return current && current > moment().endOf('day');
};
// 弹出日历框时,清空之前选择的日期
const onOpenChange = (open) => {
if (open) {
form.setFieldValue('time', [null, null]);
setDates(null);
}
};
// 单独只要求今天之后日期置灰,无时间跨度要求
const disableDate = (current) => {
let result = false;
if (current > moment().add(0, 'days')) {
result = true;
}
return result;
};