时间时钟

时间时钟组件允许用户无需任何输入或弹窗/模态框即可选择时间。

基本用法

<TimeClock />

<TimeClock />

按 Enter 键开始编辑

非受控值 vs. 受控值

组件的值可以是无受控的或受控的。

非受控时钟

受控时钟

<DemoItem label="Uncontrolled clock">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Controlled clock">
  <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
</DemoItem>

<DemoItem label="Uncontrolled clock">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Controlled clock">
  <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
</DemoItem>

按 Enter 键开始编辑

表单属性

组件可以被禁用或只读。

禁用

只读

<DemoItem label="disabled">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} disabled />
</DemoItem>
<DemoItem label="readOnly">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} readOnly />
</DemoItem>

<DemoItem label="disabled">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} disabled />
</DemoItem>
<DemoItem label="readOnly">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} readOnly />
</DemoItem>

按 Enter 键开始编辑

视图

该组件可以包含三个视图：hours、minutes 和 seconds。默认情况下，仅启用 hours 和 minutes 视图。

您可以使用 views 属性自定义启用的视图。视图将按照它们在 views 数组中包含的顺序出现。

"hours"、"minutes" 和 "seconds"

"hours"

"minutes" 和 "seconds"

<DemoItem label={'"hours", "minutes" and "seconds"'}>
  <TimeClock views={['hours', 'minutes', 'seconds']} />
</DemoItem>
<DemoItem label={'"hours"'}>
  <TimeClock views={['hours']} />
</DemoItem>
<DemoItem label={'"minutes" and "seconds"'}>
  <TimeClock views={['minutes', 'seconds']} />
</DemoItem>

<DemoItem label={'"hours", "minutes" and "seconds"'}>
  <TimeClock views={['hours', 'minutes', 'seconds']} />
</DemoItem>
<DemoItem label={'"hours"'}>
  <TimeClock views={['hours']} />
</DemoItem>
<DemoItem label={'"minutes" and "seconds"'}>
  <TimeClock views={['minutes', 'seconds']} />
</DemoItem>

按 Enter 键开始编辑

12小时/24小时格式

该组件使用locale时间设置的小时格式，即 12 小时制或 24 小时制。

您可以使用 ampm 属性强制使用特定格式。

您可以在日期本地化页面中找到有关 12 小时/24 小时格式的更多信息。

Locale 默认行为 (为 enUS 启用)

启用 AM PM

禁用 AM PM

<DemoItem label="Locale default behavior (enabled for enUS)">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="AM PM enabled">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} ampm />
</DemoItem>
<DemoItem label="AM PM disabled">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} ampm={false} />
</DemoItem>

<DemoItem label="Locale default behavior (enabled for enUS)">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="AM PM enabled">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} ampm />
</DemoItem>
<DemoItem label="AM PM disabled">
  <TimeClock defaultValue={dayjs('2022-04-17T15:30')} ampm={false} />
</DemoItem>

按 Enter 键开始编辑

本地化

有关更多详细信息，请参阅日期格式和本地化和已翻译组件文档页面。

验证

有关更多详细信息，请参阅验证文档页面。

API

请参阅下面的文档，以获取此处提及的组件的所有属性和类的完整参考。

<TimeClock />