数字时钟

数字时钟让用户无需任何输入或弹出窗口/模态框即可选择时间。

描述

针对不同的情况，有两个组件版本。DigitalClock 组件一步处理单个时间实例的选择，就像 select 组件一样。MultiSectionDigitalClock 允许使用单独的部分来选择时间。

当需要的时间选项数量有限时，DigitalClock 更为合适，而当需要更精细的时间选择时，MultiSectionDigitalClock 更为适用。

基本用法

数字时钟

多段数字时钟

<DemoItem label="Digital clock">
  <DigitalClock />
</DemoItem>
<DemoItem label="Multi section digital clock">
  <MultiSectionDigitalClock />
</DemoItem>

<DemoItem label="Digital clock">
  <DigitalClock />
</DemoItem>
<DemoItem label="Multi section digital clock">
  <MultiSectionDigitalClock />
</DemoItem>

按 Enter 开始编辑

非受控 vs. 受控值

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

非受控数字时钟

受控数字时钟

非受控多段数字时钟

受控多段数字时钟

表单属性

组件可以被禁用或只读。

禁用数字时钟

只读数字时钟

禁用多段数字时钟

只读多段数字时钟

视图

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

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

"hours"、"minutes" 和 "seconds"

"hours"

"minutes" 和 "seconds"

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

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

按 Enter 开始编辑

12 小时/24 小时格式

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

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

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

区域设置默认行为（为 enUS 启用）

AM PM 已启用

AM PM 已禁用

时间步长

默认情况下，组件以下列方式列出时间选项

DigitalClock 组件以 30 分钟为间隔；
MultiSectionDigitalClock 组件以 5 单位（minutes 或 seconds）为间隔；

您可以使用 timeStep 和 timeSteps 属性设置所需的间隔。该属性接受

DigitalClock 组件接受 number 值的 timeStep 属性；
MultiSectionDigitalClock 组件接受 timeSteps 属性，该属性具有 hours、minutes 或 seconds 单位的 number 值；

数字时钟

多段数字时钟

<DemoItem label="Digital clock">
  <DigitalClock timeStep={60} />
</DemoItem>
<DemoItem label="Multi section digital clock">
  <MultiSectionDigitalClock
    timeSteps={{ hours: 2, minutes: 15, seconds: 10 }}
    views={['hours', 'minutes', 'seconds']}
  />
</DemoItem>

<DemoItem label="Digital clock">
  <DigitalClock timeStep={60} />
</DemoItem>
<DemoItem label="Multi section digital clock">
  <MultiSectionDigitalClock
    timeSteps={{ hours: 2, minutes: 15, seconds: 10 }}
    views={['hours', 'minutes', 'seconds']}
  />
</DemoItem>

按 Enter 开始编辑

跳过渲染禁用的选项

使用 skipDisabled 属性，组件不会渲染用户不可用的选项（例如，通过 minTime、maxTime、shouldDisabledTime 等）。

以下示例结合了这些属性来自定义渲染哪些选项。

第一个组件不显示 9:00 之前（minTime 的值）的选项。
第二个组件由于 shouldDisableTime 而显示 09:00 和 13:20 之间的选项。

数字时钟

多段数字时钟

<DemoItem label="Digital clock">
  <DigitalClock
    skipDisabled
    minTime={dayjs('2022-04-17T09:00')}
    timeStep={60}
  />
</DemoItem>
<DemoItem label="Multi section digital clock">
  <MultiSectionDigitalClock
    skipDisabled
    shouldDisableTime={shouldDisableTime}
    ampm={false}
  />
</DemoItem>

<DemoItem label="Digital clock">
  <DigitalClock
    skipDisabled
    minTime={dayjs('2022-04-17T09:00')}
    timeStep={60}
  />
</DemoItem>
<DemoItem label="Multi section digital clock">
  <MultiSectionDigitalClock
    skipDisabled
    shouldDisableTime={shouldDisableTime}
    ampm={false}
  />
</DemoItem>

按 Enter 开始编辑

本地化

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

验证

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

API

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