antd 使用DatePicker组件的格式是format="YYYY-MM-DD HH:mm",如为判断开始时间不能大于结束时间
时间: 2024-03-05 10:48:48 浏览: 20
antd-DatePicker组件获取时间值,及相关设置方式
5星 · 资源好评率100%
可以在`disabledDate`函数中判断开始时间是否晚于结束时间,如果是则返回`true`禁用该日期。以下是一个示例代码:
```jsx
import { DatePicker } from 'antd';
function MyComponent() {
const [startValue, setStartValue] = useState(null);
const [endValue, setEndValue] = useState(null);
function disabledDate(current) {
if (!startValue || !endValue) {
// 如果开始时间或结束时间为空,则禁用所有日期
return true;
}
// 判断开始时间是否晚于结束时间
return current.isSameOrAfter(endValue, 'day') || current.isSameOrBefore(startValue, 'day');
}
function onStartChange(value) {
setStartValue(value);
}
function onEndChange(value) {
setEndValue(value);
}
return (
<>
<DatePicker
format="YYYY-MM-DD HH:mm"
showTime={{ defaultValue: moment('00:00', 'HH:mm') }}
value={startValue}
placeholder="开始时间"
onChange={onStartChange}
disabledDate={(current) => current && disabledDate(current)}
/>
<DatePicker
format="YYYY-MM-DD HH:mm"
showTime={{ defaultValue: moment('23:59', 'HH:mm') }}
value={endValue}
placeholder="结束时间"
onChange={onEndChange}
disabledDate={(current) => current && disabledDate(current)}
/>
</>
);
}
```
在上面的代码中,我们在`disabledDate`函数中判断开始时间是否晚于结束时间,如果是则返回`true`禁用该日期。在`DatePicker`组件中,我们使用`disabledDate`属性来指定禁用日期的逻辑,这里使用了一个箭头函数来调用`disabledDate`函数,这样就能传递`current`参数了。
阅读全文