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
|
2015-10-28 20:55:49 +08:00
|
|
|
import { Datepicker } from 'antd';
|
2015-10-22 17:27:53 +08:00
|
|
|
|
2015-10-28 20:55:49 +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) {
|
2015-11-25 17:35:49 +08:00
|
|
|
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="开始日期"
|
2015-11-25 17:35:49 +08:00
|
|
|
onChange={this.onChange.bind(this, 'startValue')} />
|
2015-10-28 18:35:56 +08:00
|
|
|
<Datepicker disabledDate={this.disabledEndDate}
|
|
|
|
value={this.state.endValue}
|
|
|
|
placeholder="结束日期"
|
2015-11-25 17:35:49 +08:00
|
|
|
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
|
|
|
````
|