mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 23:59:12 +08:00
57 lines
1.4 KiB
Markdown
57 lines
1.4 KiB
Markdown
---
|
|
order: 1.1
|
|
title:
|
|
zh-CN: 切换不同的选择器
|
|
en-US: Switchable picker
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
提供选择器,自由切换不同类型的日期选择器,常用于日期筛选场合。
|
|
|
|
## en-US
|
|
|
|
Switch in different types of pickers by Select.
|
|
|
|
```tsx
|
|
import type { DatePickerProps, TimePickerProps } from 'antd';
|
|
import { DatePicker, Select, Space, TimePicker } from 'antd';
|
|
import React, { useState } from 'react';
|
|
|
|
const { Option } = Select;
|
|
|
|
type PickerType = 'time' | 'date';
|
|
|
|
const PickerWithType = ({
|
|
type,
|
|
onChange,
|
|
}: {
|
|
type: PickerType;
|
|
onChange: TimePickerProps['onChange'] | DatePickerProps['onChange'];
|
|
}) => {
|
|
if (type === 'time') return <TimePicker onChange={onChange} />;
|
|
if (type === 'date') return <DatePicker onChange={onChange} />;
|
|
return <DatePicker picker={type} onChange={onChange} />;
|
|
};
|
|
|
|
const App: React.FC = () => {
|
|
const [type, setType] = useState<PickerType>('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>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
```
|