ant-design/components/datepicker/demo/start-end.md

55 lines
1.3 KiB
Markdown
Raw Normal View History

2015-11-06 22:27:58 +08:00
# 日期范围选择
2015-10-22 17:27:53 +08:00
- order: 7
2015-11-06 22:27:58 +08:00
设置 `disabledDate` 方法,来约束开始和结束日期。
2015-10-22 17:27:53 +08:00
---
````jsx
import { Datepicker } from 'antd';
2015-10-22 17:27:53 +08:00
const DateRange = React.createClass({
2015-10-22 17:27:53 +08:00
getInitialState() {
return {
startValue: null,
endValue: null
};
},
disabledStartDate(startValue) {
if (!startValue || !this.state.endValue) {
return false;
}
return startValue.getTime() >= this.state.endValue.getTime();
},
2015-10-28 18:35:56 +08:00
disabledEndDate(endValue) {
if (!endValue || !this.state.startValue) {
return false;
}
return endValue.getTime() <= this.state.startValue.getTime();
},
2015-10-22 17:27:53 +08:00
onChange(field, value) {
console.log(field, 'change', value);
2015-10-22 17:27:53 +08:00
this.setState({
[field]: value,
});
},
render() {
2015-10-28 18:35:56 +08:00
return <div>
<Datepicker disabledDate={this.disabledStartDate}
value={this.state.startValue}
placeholder="开始日期"
onChange={this.onChange.bind(this, 'startValue')} />
2015-10-28 18:35:56 +08:00
<Datepicker disabledDate={this.disabledEndDate}
value={this.state.endValue}
placeholder="结束日期"
onChange={this.onChange.bind(this, 'endValue')} />
2015-10-22 17:27:53 +08:00
</div>;
}
});
ReactDOM.render(
2015-10-28 18:35:56 +08:00
<DateRange />
2015-10-23 11:52:05 +08:00
, document.getElementById('components-datepicker-demo-start-end'));
2015-10-22 17:27:53 +08:00
````