2016-03-31 09:40:55 +08:00
|
|
|
---
|
|
|
|
order: 7
|
2016-06-19 11:17:09 +08:00
|
|
|
title:
|
|
|
|
zh-CN: 日期范围一
|
|
|
|
en-US: Date range, case 1
|
2016-03-31 09:40:55 +08:00
|
|
|
---
|
2015-10-22 17:27:53 +08:00
|
|
|
|
2016-06-19 11:17:09 +08:00
|
|
|
## zh-CN
|
|
|
|
|
2015-12-25 01:21:03 +08:00
|
|
|
可以设置 `disabledDate` 方法,来约束开始和结束日期。
|
2015-10-22 17:27:53 +08:00
|
|
|
|
2016-06-19 11:17:09 +08:00
|
|
|
## en-US
|
|
|
|
|
|
|
|
You can use the `disabledDate` property to limit the start and end dates.
|
|
|
|
|
|
|
|
|
2015-10-22 17:27:53 +08:00
|
|
|
````jsx
|
2015-12-10 16:12:10 +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,
|
2016-05-11 09:32:33 +08:00
|
|
|
endValue: null,
|
2016-06-15 17:46:25 +08:00
|
|
|
endOpen: false,
|
2015-10-22 17:27:53 +08:00
|
|
|
};
|
|
|
|
},
|
|
|
|
disabledStartDate(startValue) {
|
|
|
|
if (!startValue || !this.state.endValue) {
|
|
|
|
return false;
|
|
|
|
}
|
2016-07-18 16:44:30 +08:00
|
|
|
return startValue.getTime() > this.state.endValue.getTime();
|
2015-10-22 17:27:53 +08:00
|
|
|
},
|
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) {
|
|
|
|
this.setState({
|
|
|
|
[field]: value,
|
|
|
|
});
|
|
|
|
},
|
2016-03-30 17:06:19 +08:00
|
|
|
onStartChange(value) {
|
|
|
|
this.onChange('startValue', value);
|
|
|
|
},
|
|
|
|
onEndChange(value) {
|
|
|
|
this.onChange('endValue', value);
|
|
|
|
},
|
2016-06-15 17:46:25 +08:00
|
|
|
handleStartToggle({ open }) {
|
|
|
|
if (!open) {
|
|
|
|
this.setState({ endOpen: true });
|
|
|
|
}
|
|
|
|
},
|
|
|
|
handleEndToggle({ open }) {
|
|
|
|
this.setState({ endOpen: open });
|
|
|
|
},
|
2015-10-22 17:27:53 +08:00
|
|
|
render() {
|
2016-01-07 16:29:12 +08:00
|
|
|
return (
|
|
|
|
<div>
|
2016-06-15 17:46:25 +08:00
|
|
|
<DatePicker
|
|
|
|
disabledDate={this.disabledStartDate}
|
|
|
|
showTime
|
|
|
|
format="yyyy-MM-dd HH:mm:ss"
|
2016-01-08 14:41:05 +08:00
|
|
|
value={this.state.startValue}
|
|
|
|
placeholder="开始日期"
|
2016-06-06 13:54:10 +08:00
|
|
|
onChange={this.onStartChange}
|
2016-06-15 17:46:25 +08:00
|
|
|
toggleOpen={this.handleStartToggle}
|
2016-06-06 13:54:10 +08:00
|
|
|
/>
|
2016-06-15 17:46:25 +08:00
|
|
|
<DatePicker
|
|
|
|
disabledDate={this.disabledEndDate}
|
|
|
|
showTime
|
|
|
|
format="yyyy-MM-dd HH:mm:ss"
|
2016-01-08 14:41:05 +08:00
|
|
|
value={this.state.endValue}
|
|
|
|
placeholder="结束日期"
|
2016-06-06 13:54:10 +08:00
|
|
|
onChange={this.onEndChange}
|
2016-06-15 17:46:25 +08:00
|
|
|
open={this.state.endOpen}
|
|
|
|
toggleOpen={this.handleEndToggle}
|
2016-06-06 13:54:10 +08:00
|
|
|
/>
|
2016-01-07 16:29:12 +08:00
|
|
|
</div>
|
|
|
|
);
|
2016-05-11 09:32:33 +08:00
|
|
|
},
|
2015-10-22 17:27:53 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
ReactDOM.render(
|
2015-10-28 18:35:56 +08:00
|
|
|
<DateRange />
|
2015-12-29 12:08:58 +08:00
|
|
|
, mountNode);
|
2015-10-22 17:27:53 +08:00
|
|
|
````
|