mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-06 02:15:35 +08:00
969 B
969 B
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 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;
};
return (
<RangePicker
disabledDate={disabledDate}
onCalendarChange={value => {
setDates(value);
}}
/>
);
};
ReactDOM.render(<App />, mountNode);