mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 23:35:38 +08:00
2.3 KiB
2.3 KiB
order | title | debug | ||||
---|---|---|---|---|---|---|
99 |
|
true |
zh-CN
当 RangePicker
无法满足业务需求时,可以使用两个 DatePicker
实现类似的功能。
- 通过设置
disabledDate
方法,来约束开始和结束日期。- 通过
open
onOpenChange
来优化交互。
en-US
When RangePicker
does not satisfied your requirements, try to implement similar functionality with two DatePicker
.
- Use the
disabledDate
property to limit the start and end dates.- Improve user experience with
open
andonOpenChange
.
import { DatePicker } from 'antd';
class DateRange extends React.Component {
state = {
startValue: null,
endValue: null,
endOpen: false,
};
disabledStartDate = startValue => {
const { endValue } = this.state;
if (!startValue || !endValue) {
return false;
}
return startValue.valueOf() > endValue.valueOf();
};
disabledEndDate = endValue => {
const { startValue } = this.state;
if (!endValue || !startValue) {
return false;
}
return endValue.valueOf() <= startValue.valueOf();
};
onChange = (field, value) => {
this.setState({
[field]: value,
});
};
onStartChange = value => {
this.onChange('startValue', value);
};
onEndChange = value => {
this.onChange('endValue', value);
};
handleStartOpenChange = open => {
if (!open) {
this.setState({ endOpen: true });
}
};
handleEndOpenChange = open => {
this.setState({ endOpen: open });
};
render() {
const { startValue, endValue, endOpen } = this.state;
return (
<>
<DatePicker
disabledDate={this.disabledStartDate}
showTime
format="YYYY-MM-DD HH:mm:ss"
value={startValue}
placeholder="Start"
onChange={this.onStartChange}
onOpenChange={this.handleStartOpenChange}
/>
<DatePicker
disabledDate={this.disabledEndDate}
showTime
format="YYYY-MM-DD HH:mm:ss"
value={endValue}
placeholder="End"
onChange={this.onEndChange}
open={endOpen}
onOpenChange={this.handleEndOpenChange}
/>
</>
);
}
}
ReactDOM.render(<DateRange />, mountNode);