數位時鐘

數位時鐘讓使用者無需任何輸入或彈出視窗/模態框即可選擇時間。

描述

針對不同情況，有兩個元件版本。 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 小時格式

元件使用locale時間設定的小時格式，即 12 小時或 24 小時格式。

您可以使用 ampm 屬性強制使用特定格式。

您可以在日期本地化頁面中找到有關 12 小時/24 小時格式的更多資訊。

Locale 預設行為（為 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

請參閱以下文件，以獲取此處提及的元件的所有可用屬性和類別的完整參考。