mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 23:35:38 +08:00
47 lines
1.2 KiB
Markdown
47 lines
1.2 KiB
Markdown
---
|
|
order: 1.1
|
|
title:
|
|
zh-CN: 切换不同的选择器
|
|
en-US: Switchable picker
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
提供选择器,自由切换不同类型的日期选择器,常用于日期筛选场合。
|
|
|
|
## en-US
|
|
|
|
Switch in different types of pickers by Select.
|
|
|
|
```jsx
|
|
import React, { useState } from 'react';
|
|
import { DatePicker, TimePicker, Select, Space } from 'antd';
|
|
|
|
const { Option } = Select;
|
|
|
|
function PickerWithType({ type, onChange }) {
|
|
if (type === 'time') return <TimePicker onChange={onChange} />;
|
|
if (type === 'date') return <DatePicker onChange={onChange} />;
|
|
return <DatePicker picker={type} onChange={onChange} />;
|
|
}
|
|
|
|
function SwitchablePicker() {
|
|
const [type, setType] = useState('time');
|
|
return (
|
|
<Space>
|
|
<Select value={type} onChange={setType}>
|
|
<Option value="time">Time</Option>
|
|
<Option value="date">Date</Option>
|
|
<Option value="week">Week</Option>
|
|
<Option value="month">Month</Option>
|
|
<Option value="quarter">Quarter</Option>
|
|
<Option value="year">Year</Option>
|
|
</Select>
|
|
<PickerWithType type={type} onChange={value => console.log(value)} />
|
|
</Space>
|
|
);
|
|
}
|
|
|
|
ReactDOM.render(<SwitchablePicker />, mountNode);
|
|
```
|