---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法,在浮层中可以选择或者输入日期。
## en-US
Basic use case. Users can select or input a date in panel.
```jsx
import { DatePicker, TimePicker, Select, Space } from 'antd';
const { Option } = Select;
function TypeSelect({ type, onChange }) {
return (
);
}
function PickerWithType({ type, onChange }) {
if (type === 'time') return ;
if (type === 'date') return ;
return ;
}
function SwitchablePicker() {
const [type, setType] = React.useState('time');
const onChange = value => {
console.log(value);
};
return (
);
}
ReactDOM.render(
,
mountNode,
);
```