const [startDate, setStartDate] = useState( moment()); const [endDate, setEndDate] = useState( moment().add(3, 'days')); const disabledDate = (current) => { if (!startDate) { // 如果起始日期未选择,则禁用所有日期 return false; } const maxEndDate = moment(startDate, 'YYYY-MM-DD HH:mm'); return endDate.valueOf() <= startDate.valueOf() || endDate.valueOf() > maxEndDate.valueOf(); }; <Form.Item label="开始日期" name='startTime' rules={[{ required: true, message: '开始日期不能为空' }]}> <DatePicker format="YYYY-MM-DD HH:mm" style={{ width: "100%" }} onChange={(date) => setStartDate(date)} showTime={{ defaultValue: moment('00:00', 'HH:mm') }} /> </Form.Item> <Form.Item label="截止日期" name='expireTime' rules={[{ required: true, message: '截止日期不能为空' }]}> <DatePicker disabledDate={disabledDate} onChange={(date) => setEndDate(date)} format="YYYY-MM-DD HH:mm" style={{ width: "100%" }} showTime={{ defaultValue: moment('00:00', 'HH:mm') }} /> </Form.Item>上面代码有什么问题
时间: 2024-03-08 14:46:09 浏览: 106
上面的代码存在如下问题:
1. 在 `disabledDate` 函数中,判断 `endDate` 是否大于 `maxEndDate` 时使用了 `endDate.valueOf()` 和 `maxEndDate.valueOf()`,这样会将两个日期对象转为时间戳进行比较,但是这样比较的是两个数字,无法正确比较日期大小。应该使用 moment.js 库提供的 `isSameOrAfter` 或 `isSameOrBefore` 方法比较日期大小。
2. 在 `disabledDate` 函数中,如果 `startDate` 未选择,应该返回 `false`,表示不禁用任何日期,而不是返回 `true`,表示禁用所有日期。
3. 在 `Form.Item` 组件中,`name` 属性的值应该分别为 `startTime` 和 `expireTime`,而不是 `startTime` 和 `endTime`。
下面是修改后的代码:
```jsx
const [startDate, setStartDate] = useState(moment());
const [endDate, setEndDate] = useState(moment().add(3, 'days'));
const disabledDate = (current) => {
if (!startDate) {
// 如果起始日期未选择,则不禁用任何日期
return false;
}
const maxEndDate = moment(startDate, 'YYYY-MM-DD HH:mm');
return endDate.isSameOrBefore(startDate) || endDate.isSameOrAfter(maxEndDate);
};
<Form.Item label="开始日期" name='startTime' rules={[{ required: true, message: '开始日期不能为空' }]}>
<DatePicker
format="YYYY-MM-DD HH:mm"
style={{ width: "100%" }}
onChange={(date) => setStartDate(date)}
showTime={{ defaultValue: moment('00:00', 'HH:mm') }}
/>
</Form.Item>
<Form.Item label="截止日期" name='expireTime' rules={[{ required: true, message: '截止日期不能为空' }]}>
<DatePicker
format="YYYY-MM-DD HH:mm"
style={{ width: "100%" }}
onChange={(date) => setEndDate(date)}
disabledDate={disabledDate}
showTime={{ defaultValue: moment('00:00', 'HH:mm') }}
/>
</Form.Item>
```
阅读全文