You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.2 KiB
47 lines
1.2 KiB
4 years ago
|
---
|
||
|
|
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);
|
||
|
|
```
|