ant-design/components/date-picker/demo/mode.md
2020-06-06 14:01:29 +08:00

88 lines
1.5 KiB
Markdown

---
order: 99
title:
zh-CN: 受控面板
en-US: Controlled Panels
debug: true
---
## zh-CN
通过组合 `mode``onPanelChange` 控制要展示的面板。
## en-US
Determing which panel to show with `mode` and `onPanelChange`.
```jsx
import { DatePicker } from 'antd';
const { RangePicker } = DatePicker;
class ControlledDatePicker extends React.Component {
state = { mode: 'time' };
handleOpenChange = open => {
if (open) {
this.setState({ mode: 'time' });
}
};
handlePanelChange = (value, mode) => {
this.setState({ mode });
};
render() {
return (
<DatePicker
mode={this.state.mode}
showTime
onOpenChange={this.handleOpenChange}
onPanelChange={this.handlePanelChange}
/>
);
}
}
class ControlledRangePicker extends React.Component {
state = {
mode: ['month', 'month'],
value: [],
};
handlePanelChange = (value, mode) => {
this.setState({
value,
mode: [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]],
});
};
handleChange = value => {
this.setState({ value });
};
render() {
const { value, mode } = this.state;
return (
<RangePicker
placeholder={['Start month', 'End month']}
format="YYYY-MM"
value={value}
mode={mode}
onChange={this.handleChange}
onPanelChange={this.handlePanelChange}
/>
);
}
}
ReactDOM.render(
<>
<ControlledDatePicker />
<br />
<ControlledRangePicker />
</>,
mountNode,
);
```