antd 使用DatePicker组件的格式是format="YYYY-MM-DD HH:mm",如为禁止结束时间不能选择大于开始结束时间
时间: 2024-03-26 18:38:07 浏览: 50
antd-DatePicker组件获取时间值,及相关设置方式
5星 · 资源好评率100%
你可以通过设置 `DatePicker` 组件的 `disabledDate` 属性来实现禁止结束时间选择大于开始时间的功能。具体做法是在 `disabledDate` 中返回一个函数,该函数接收一个日期参数,如果该日期小于或等于开始时间,则返回 `false`,否则返回 `true`,表示该日期应该被禁用。下面是一个示例代码:
```jsx
import { useState } from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';
function App() {
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const disabledEndDate = (current) => {
if (!startDate) {
return false;
}
return current && current <= startDate.startOf('day');
};
const handleStartDateChange = (date, dateString) => {
setStartDate(moment(dateString, 'YYYY-MM-DD HH:mm'));
};
const handleEndDateChange = (date, dateString) => {
setEndDate(moment(dateString, 'YYYY-MM-DD HH:mm'));
};
return (
<>
<DatePicker
showTime
format="YYYY-MM-DD HH:mm"
placeholder="开始时间"
onChange={handleStartDateChange}
/>
<DatePicker
showTime
format="YYYY-MM-DD HH:mm"
placeholder="结束时间"
disabledDate={disabledEndDate}
onChange={handleEndDateChange}
/>
</>
);
}
export default App;
```
在上面的代码中,我们定义了两个状态变量 `startDate` 和 `endDate`,分别保存开始时间和结束时间。在 `disabledEndDate` 函数中,我们首先判断开始时间是否已经选择,如果没有选择,则不禁用任何日期;否则,我们比较当前日期是否小于或等于开始时间的当天,如果是,则返回 `false`,表示该日期可以选择,否则,返回 `true`,表示该日期应该被禁用。最后,在 `DatePicker` 组件中,我们将 `disabledDate` 属性设置为 `disabledEndDate` 函数,以实现禁用结束时间选择大于开始时间的功能。
阅读全文