a-range-picker 设置时间只能在2023-05-26 00:00:00到2023-06-17 11:59:59 之间选择
时间: 2024-01-18 16:05:02 浏览: 102
datepicker 前端时间范围选择
你可以使用 antd 的 RangePicker 组件来实现这个功能。首先,你需要设置 RangePicker 的 valueFormat 为 "YYYY-MM-DD HH:mm:ss",以便它可以接受时间格式的值。然后,你可以设置 RangePicker 的 defaultValue 为 ["2023-05-26 00:00:00", "2023-06-17 11:59:59"],以限制可选时间范围。最后,你可以在 onChange 回调中检查选择的时间是否在指定范围内,如果不是,则弹出提示并将选择的时间重置为默认值。
以下是示例代码:
```jsx
import { useState } from "react";
import { DatePicker } from "antd";
function App() {
const [value, setValue] = useState(null);
const disabledDate = (current) => {
const start = "2023-05-26 00:00:00";
const end = "2023-06-17 11:59:59";
return current < start || current > end;
};
const onChange = (dates, dateStrings) => {
const start = "2023-05-26 00:00:00";
const end = "2023-06-17 11:59:59";
if (dateStrings[0] < start || dateStrings[1] > end) {
alert("请选择有效时间范围!");
setValue(["2023-05-26 00:00:00", "2023-06-17 11:59:59"]);
} else {
setValue(dates);
}
};
return (
<DatePicker.RangePicker
value={value}
defaultValue={["2023-05-26 00:00:00", "2023-06-17 11:59:59"]}
format="YYYY-MM-DD HH:mm:ss"
disabledDate={disabledDate}
onChange={onChange}
/>
);
}
export default App;
```
阅读全文