antd 使用DatePicker组件的格式是format="YYYY-MM-DD HH:mm",如为禁止结束时间不能选择大于开始结束时间
时间: 2024-03-19 11:43:13 浏览: 20
您可以通过设置 `disabledDate` 属性来禁止选择大于开始时间的日期。
首先,在 `DatePicker` 组件中设置 `disabledDate` 属性,传入一个函数,该函数接收一个日期对象,返回一个布尔值,表示该日期是否可选。示例代码如下:
```jsx
<DatePicker
showTime
format="YYYY-MM-DD HH:mm"
disabledDate={disabledEndDate}
onChange={onChangeEndDate}
/>
```
然后,编写 `disabledEndDate` 函数,用于判断该日期是否可选。该函数接收一个日期对象,我们可以根据该日期对象和开始时间来判断该日期是否可选。如果该日期大于或等于开始时间,则该日期不可选。示例代码如下:
```jsx
function disabledEndDate(endDate) {
if (!startDate) {
return false;
}
return endDate.valueOf() <= startDate.valueOf();
}
```
在该函数中,`startDate` 是开始日期,可以通过另外一个 `DatePicker` 组件的 `onChange` 事件来获取。如果 `startDate` 为空,则说明开始日期还未选择,此时不禁止选择结束日期。否则,判断结束日期是否小于或等于开始日期,如果是,则该日期不可选。
最后,编写 `onChangeEndDate` 函数,用于更新结束日期。该函数接收一个日期对象,将该日期对象保存到组件的状态中。示例代码如下:
```jsx
function onChangeEndDate(endDate) {
setEndDate(endDate);
}
```
在该函数中,`setEndDate` 是用于更新结束日期的状态函数,可以使用 `useState` 钩子函数来定义。完整的示例代码如下:
```jsx
import React, { useState } from "react";
import { DatePicker } from "antd";
function App() {
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
function disabledEndDate(endDate) {
if (!startDate) {
return false;
}
return endDate.valueOf() <= startDate.valueOf();
}
function onChangeStartDate(startDate) {
setStartDate(startDate);
}
function onChangeEndDate(endDate) {
setEndDate(endDate);
}
return (
<div>
<DatePicker
showTime
format="YYYY-MM-DD HH:mm"
disabledDate={disabledEndDate}
onChange={onChangeEndDate}
/>
<DatePicker
showTime
format="YYYY-MM-DD HH:mm"
disabledDate={disabledStartDate}
onChange={onChangeStartDate}
/>
</div>
);
}
export default App;
```