ant-design/components/date-picker/demo/start-end.md

90 lines
1.9 KiB
Markdown
Raw Normal View History

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
可以设置 `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
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,
2016-05-11 09:32:33 +08:00
endValue: null,
endOpen: false,
2015-10-22 17:27:53 +08:00
};
},
disabledStartDate(startValue) {
if (!startValue || !this.state.endValue) {
return false;
}
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);
},
handleStartToggle({ open }) {
if (!open) {
this.setState({ endOpen: true });
}
},
handleEndToggle({ open }) {
this.setState({ endOpen: open });
},
2015-10-22 17:27:53 +08:00
render() {
return (
<div>
<DatePicker
disabledDate={this.disabledStartDate}
showTime
format="yyyy-MM-dd HH:mm:ss"
value={this.state.startValue}
placeholder="开始日期"
onChange={this.onStartChange}
toggleOpen={this.handleStartToggle}
/>
<DatePicker
disabledDate={this.disabledEndDate}
showTime
format="yyyy-MM-dd HH:mm:ss"
value={this.state.endValue}
placeholder="结束日期"
onChange={this.onEndChange}
open={this.state.endOpen}
toggleOpen={this.handleEndToggle}
/>
</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 />
, mountNode);
2015-10-22 17:27:53 +08:00
````