mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-29 13:47:02 +08:00
7dd4a019d5
+ DatePicker showTime: 面板上的日期展示输入框统一为一个，格式和外面的输入框同步，并且支持手动修改。 面板上的 TimePicker + DatePicker showTime: 输入框不再展示，改造为『选择时间』，点击后不再展开浮层，直接盖住日期区域。 + RangePicker showTime : 只选中开始日期，“确定”和“选择时间”灰置。 如未选择日期直接选择时间，开始日期和结束日期默认选中当天。 + RangePicker showTime : 点击框外和确定均为确定操作。 + RangePicker showTime : 在时间页面，开始时间的默认状态为当前时间，结束时间的默认状态跟随开始时间。 + RangePicker showTime : 开始时间的选择范围没有限制，结束时间的选择范围必须大于等于开始时间。 + RangePicker showTime : 当开始时间选择了结束时间之后的时间（发生冲突），结束时间则自动切换到与开始时间相同的时间。
1.9 KiB
1.9 KiB
| order | title | ||||
|---|---|---|---|---|---|
| 7 |
|
zh-CN
可以设置 disabledDate 方法，来约束开始和结束日期。
en-US
You can use the disabledDate property to limit the start and end dates.
import { DatePicker } from 'antd';
const DateRange = React.createClass({
getInitialState() {
return {
startValue: null,
endValue: null,
endOpen: false,
};
},
disabledStartDate(startValue) {
if (!startValue || !this.state.endValue) {
return false;
}
return startValue.getTime() > this.state.endValue.getTime();
},
disabledEndDate(endValue) {
if (!endValue || !this.state.startValue) {
return false;
}
return endValue.getTime() <= this.state.startValue.getTime();
},
onChange(field, value) {
this.setState({
[field]: value,
});
},
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 });
},
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>
);
},
});
ReactDOM.render(
<DateRange />
, mountNode);