2017-03-22 17:53:37 +08:00
|
|
|
---
|
|
|
|
order: 7
|
|
|
|
title:
|
|
|
|
zh-CN: 12 小时制
|
|
|
|
en-US: 12 hours
|
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
|
|
|
12 小时制的时间选择器,默认的 format 为 `h:mm:ss a`。
|
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
|
|
|
TimePicker of 12 hours format, with default format `h:mm:ss a`.
|
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
```tsx
|
2017-03-22 17:53:37 +08:00
|
|
|
import { TimePicker } from 'antd';
|
2022-05-21 23:04:51 +08:00
|
|
|
import type { Dayjs } from 'dayjs';
|
2022-05-21 22:14:15 +08:00
|
|
|
import React from 'react';
|
2017-03-22 17:53:37 +08:00
|
|
|
|
2022-05-21 23:04:51 +08:00
|
|
|
const onChange = (time: Dayjs, timeString: string) => {
|
2017-03-22 17:53:37 +08:00
|
|
|
console.log(time, timeString);
|
2022-05-19 09:46:26 +08:00
|
|
|
};
|
2017-03-22 17:53:37 +08:00
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
const App: React.FC = () => (
|
2020-06-06 13:56:26 +08:00
|
|
|
<>
|
2017-03-22 17:53:37 +08:00
|
|
|
<TimePicker use12Hours onChange={onChange} />
|
2019-12-11 23:32:19 +08:00
|
|
|
<TimePicker use12Hours format="h:mm:ss A" onChange={onChange} style={{ width: 140 }} />
|
2017-03-22 17:53:37 +08:00
|
|
|
<TimePicker use12Hours format="h:mm a" onChange={onChange} />
|
2022-04-03 23:27:45 +08:00
|
|
|
</>
|
2018-11-28 15:00:03 +08:00
|
|
|
);
|
2022-05-19 09:46:26 +08:00
|
|
|
|
|
|
|
export default App;
|
2019-05-07 14:57:32 +08:00
|
|
|
```
|