mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-06 02:15:35 +08:00
5a08aab0e8
* docs: DatePicker change type demo * chore: snapshot * chore * docs: DatePicker use Space * chore: snapshot
1.3 KiB
1.3 KiB
order | title | ||||
---|---|---|---|---|---|
0 |
|
zh-CN
最简单的用法,在浮层中可以选择或者输入日期。
en-US
Basic use case. Users can select or input a date in panel.
import { DatePicker, TimePicker, Select, Space } from 'antd';
const { Option } = Select;
function TypeSelect({ type, onChange }) {
return (
<Select value={type} onChange={onChange}>
<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>
);
}
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] = React.useState('time');
const onChange = value => {
console.log(value);
};
return (
<Space>
<TypeSelect type={type} onChange={setType} />
<PickerWithType type={type} onChange={onChange} />
</Space>
);
}
ReactDOM.render(
<Space direction="vertical" size={12}>
<DatePicker />
<SwitchablePicker />
</Space>,
mountNode,
);