ant-design/components/date-picker/demo/start-end.md
2017-01-19 15:22:53 +08:00

100 lines
2.3 KiB
Markdown

---
order: 6
title:
zh-CN: 自定义日期范围选择
en-US: Customized Range Picker
---
## zh-CN
`RangePicker` 无法满足业务需求时,可以使用两个 `DatePicker` 实现类似的功能。
> * 通过设置 `disabledDate` 方法,来约束开始和结束日期。
> * 通过 `open` `onOpenChange` 来优化交互。
## en-US
When `RangePicker` is not satisfied your requirements, try to implement similar functionality with two `DatePicker`.
> * Use the `disabledDate` property to limit the start and end dates.
> * Imporve user experience with `open` `onOpenChange`.
````__react
import { DatePicker } from 'antd';
class DateRange extends React.Component {
state = {
startValue: null,
endValue: null,
endOpen: false,
};
disabledStartDate = (startValue) => {
const endValue = this.state.endValue;
if (!startValue || !endValue) {
return false;
}
return startValue.valueOf() > endValue.valueOf();
}
disabledEndDate = (endValue) => {
const startValue = this.state.startValue;
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 (
<div>
<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}
/>
</div>
);
}
}
ReactDOM.render(<DateRange />, mountNode);
````