mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 09:39:10 +08:00
49 lines
1.2 KiB
Markdown
49 lines
1.2 KiB
Markdown
---
|
|
order: 3
|
|
title:
|
|
zh-CN: 日期时间选择
|
|
en-US: Choose Time
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
增加选择时间功能,当 `showTime` 为一个对象时,其属性会传递给内建的 `TimePicker`。
|
|
|
|
## en-US
|
|
|
|
This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to built-in `TimePicker`.
|
|
|
|
```tsx
|
|
import { DatePicker, Space } from 'antd';
|
|
import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
|
|
import React from 'react';
|
|
|
|
const { RangePicker } = DatePicker;
|
|
|
|
const onChange = (
|
|
value: DatePickerProps['value'] | RangePickerProps['value'],
|
|
dateString: [string, string] | string,
|
|
) => {
|
|
console.log('Selected Time: ', value);
|
|
console.log('Formatted Selected Time: ', dateString);
|
|
};
|
|
|
|
const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
|
|
console.log('onOk: ', value);
|
|
};
|
|
|
|
const App: React.FC = () => (
|
|
<Space direction="vertical" size={12}>
|
|
<DatePicker showTime onChange={onChange} onOk={onOk} />
|
|
<RangePicker
|
|
showTime={{ format: 'HH:mm' }}
|
|
format="YYYY-MM-DD HH:mm"
|
|
onChange={onChange}
|
|
onOk={onOk}
|
|
/>
|
|
</Space>
|
|
);
|
|
|
|
export default App;
|
|
```
|