mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
407a41a142
* init generate * basic style * basic panel style * update mode panel style * update style * generate More picker * default clear icon * chore: Update separator type * feat: Add ranged start & end className * update range style * Add transition effect * support size config * adjust range style * chore: Auto fill time by showTime * auto set time by format * update disabled style * update seperator style * ranges style * support extra footer style * remove useless test case part is not usable anymore part is already tested in rc-picker * init calendar * all demos * fix calendar basic test * fix time-picker test case * update snapshot * fix tooltip test case & lint * fix locale & style lint * fix compile * fix style * fix style lint * fix calendar style * update rc-picker version * adjust style * move picker placeholder into locale file * update snapshot * add hover style * update picker version * fix icon position & style * update picker version * update deps for pading * fix: align of suffix * feat: Year & Month support range effect * adjust range style to support up-down placement * update rc-picker * update range picker style * adjust extra footer line style * update snapshot * fix: Locale error * fix: style lint * fix: add missing button style deps * update test case * fix firefox additional white line style issue * rollback demo * fix ff additional blue color * docs: Remove placeholder in demo * rangepicker ranges is tag now * connect start / end background color with picker range * update deps * update deps for fixing blur text issue * hide start-end demo * range hover style update * hover range with ranged value * black magic of inner hover style * hover style of range adjust * fix css select miss hit on DatePicker * remove one eslint rule * fade range hovered color * week should alway not show the cell selection * update style of selection * update snapshot * fix style * add margin back * update rc-picker deps * update date & time picker & form style * fix disabled demo & update form style * update docs about allowEmpty * hide arrow in time range picker * add hover & focused style * fix lint * fix style & update snapshot * raise disabled selector proirity * fix disabled today border color * extra footer provides an bottom line * time picker hover support transition background * add padding style * fix Firefox not correct calculate inline-flex * fix style * fix week picker missing today border color * rm useless padding * Force padding to 0 * test coverage * dedup eslint rule * adjust logic to imporve coverage * fix render cell logic
103 lines
2.3 KiB
Markdown
103 lines
2.3 KiB
Markdown
---
|
|
order: 99
|
|
title:
|
|
zh-CN: 自定义日期范围选择
|
|
en-US: Customized Range Picker
|
|
debug: true
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
当 `RangePicker` 无法满足业务需求时,可以使用两个 `DatePicker` 实现类似的功能。
|
|
|
|
> - 通过设置 `disabledDate` 方法,来约束开始和结束日期。
|
|
> - 通过 `open` `onOpenChange` 来优化交互。
|
|
|
|
## en-US
|
|
|
|
When `RangePicker` does not satisfied your requirements, try to implement similar functionality with two `DatePicker`.
|
|
|
|
> - Use the `disabledDate` property to limit the start and end dates.
|
|
> - Improve user experience with `open` and `onOpenChange`.
|
|
|
|
```jsx
|
|
import { DatePicker } from 'antd';
|
|
|
|
class DateRange extends React.Component {
|
|
state = {
|
|
startValue: null,
|
|
endValue: null,
|
|
endOpen: false,
|
|
};
|
|
|
|
disabledStartDate = startValue => {
|
|
const { endValue } = this.state;
|
|
if (!startValue || !endValue) {
|
|
return false;
|
|
}
|
|
return startValue.valueOf() > endValue.valueOf();
|
|
};
|
|
|
|
disabledEndDate = endValue => {
|
|
const { startValue } = this.state;
|
|
if (!endValue || !startValue) {
|
|
return false;
|
|
}
|
|
return endValue.valueOf() <= startValue.valueOf();
|
|
};
|
|
|
|
onChange = (field, value) => {
|
|
this.setState({
|
|
[field]: value,
|
|
});
|
|
};
|
|
|
|
onStartChange = value => {
|
|
this.onChange('startValue', value);
|
|
};
|
|
|
|
onEndChange = value => {
|
|
this.onChange('endValue', value);
|
|
};
|
|
|
|
handleStartOpenChange = open => {
|
|
if (!open) {
|
|
this.setState({ endOpen: true });
|
|
}
|
|
};
|
|
|
|
handleEndOpenChange = open => {
|
|
this.setState({ endOpen: open });
|
|
};
|
|
|
|
render() {
|
|
const { startValue, endValue, endOpen } = this.state;
|
|
return (
|
|
<div>
|
|
<DatePicker
|
|
disabledDate={this.disabledStartDate}
|
|
showTime
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
value={startValue}
|
|
placeholder="Start"
|
|
onChange={this.onStartChange}
|
|
onOpenChange={this.handleStartOpenChange}
|
|
/>
|
|
<DatePicker
|
|
disabledDate={this.disabledEndDate}
|
|
showTime
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
value={endValue}
|
|
placeholder="End"
|
|
onChange={this.onEndChange}
|
|
open={endOpen}
|
|
onOpenChange={this.handleEndOpenChange}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
ReactDOM.render(<DateRange />, mountNode);
|
|
```
|