mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
520407925a
* feat: modify datepicker select-in-range demo * fix: lint
1.3 KiB
1.3 KiB
order | title | ||||
---|---|---|---|---|---|
6.1 |
|
zh-CN
这里举例如何用 onCalendarChange
和 disabledDate
来限制动态的日期区间选择。
en-US
A example shows how to select a dynamic range by using onCalendarChange
and disabledDate
.
import React, { useState } from 'react';
import { DatePicker } from 'antd';
const { RangePicker } = DatePicker;
const App = () => {
const [dates, setDates] = useState([]);
const [hackValue, setHackValue] = useState();
const [value, setValue] = useState();
const disabledDate = current => {
if (!dates || dates.length === 0) {
return false;
}
const tooLate = dates[0] && current.diff(dates[0], 'days') > 7;
const tooEarly = dates[1] && dates[1].diff(current, 'days') > 7;
return tooEarly || tooLate;
};
const onOpenChange = open => {
if (open) {
setHackValue([]);
setDates([]);
} else {
setHackValue(undefined);
}
};
return (
<RangePicker
value={hackValue || value}
disabledDate={disabledDate}
onCalendarChange={val => setDates(val)}
onChange={val => setValue(val)}
onOpenChange={onOpenChange}
/>
);
};
ReactDOM.render(<App />, mountNode);