時間選擇器

時間選擇器元件讓使用者可以選擇時間。

基本用法

基本時間選擇器

<TimePicker label="Basic time picker" />

<TimePicker label="Basic time picker" />

按下 Enter 鍵開始編輯

元件組成

此元件使用 TimeField 進行鍵盤編輯，DigitalClock 進行桌面檢視編輯，以及 TimeClock 進行行動裝置檢視編輯。

查看它們的文件頁面以獲取更多資訊

您可以在專用的 API 頁面上查看組合元件的可用 props。某些 TimeField props 在 Picker 元件上不可用，您可以使用 slotProps.field 將它們傳遞到欄位。

非受控與受控值

元件的值可以是未受控或受控的。

非受控選擇器

受控選擇器

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

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

按下 Enter 鍵開始編輯

可用元件

此元件有四種變體可用

DesktopTimePicker 元件最適合滑鼠裝置和大螢幕。它在彈出視窗內呈現視圖，並允許直接在欄位內編輯值。
MobileTimePicker 元件最適合觸控裝置和小螢幕。它在模態視窗內呈現視圖，並且不允許直接在欄位內編輯值。
TimePicker 元件根據其運行的裝置呈現 DesktopTimePicker 或 MobileTimePicker。
StaticTimePicker 元件在沒有彈出視窗/模態視窗和欄位的情況下呈現。

桌面變體

行動裝置變體

響應式變體

靜態變體

<DemoItem label="Desktop variant">
  <DesktopTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Mobile variant">
  <MobileTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Responsive variant">
  <TimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Static variant">
  <StaticTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>

<DemoItem label="Desktop variant">
  <DesktopTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Mobile variant">
  <MobileTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Responsive variant">
  <TimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Static variant">
  <StaticTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>

按下 Enter 鍵開始編輯

預設情況下，如果媒體查詢 @media (pointer: fine) 匹配，則 TimePicker 元件會呈現桌面版本。這可以使用 desktopModeMediaQuery prop 進行自訂。

表單 props

此元件可以被禁用或設為唯讀。

已禁用

唯讀

名稱

<TimePicker label="disabled" disabled />
<TimePicker label="readOnly" readOnly />
<TimePicker label="name" name="startTime" />

<TimePicker label="disabled" disabled />
<TimePicker label="readOnly" readOnly />
<TimePicker label="name" name="startTime" />

按下 Enter 鍵開始編輯

檢視

此元件支援三種檢視：hours、minutes 和 seconds。

預設情況下，hours 和 minutes 檢視已啟用。使用 views prop 來更改此行為

"hours"、"minutes" 和 "seconds"

"hours"

"minutes" 和 "seconds"

<DemoItem label={'"hours", "minutes" and "seconds"'}>
  <TimePicker views={['hours', 'minutes', 'seconds']} />
</DemoItem>
<DemoItem label={'"hours"'}>
  <TimePicker views={['hours']} />
</DemoItem>
<DemoItem label={'"minutes" and "seconds"'}>
  <TimePicker views={['minutes', 'seconds']} format="mm:ss" />
</DemoItem>

<DemoItem label={'"hours", "minutes" and "seconds"'}>
  <TimePicker views={['hours', 'minutes', 'seconds']} />
</DemoItem>
<DemoItem label={'"hours"'}>
  <TimePicker views={['hours']} />
</DemoItem>
<DemoItem label={'"minutes" and "seconds"'}>
  <TimePicker views={['minutes', 'seconds']} format="mm:ss" />
</DemoItem>

按下 Enter 鍵開始編輯

預設情況下，MobileTimePicker 元件在掛載時呈現 hours 檢視。使用 openTo prop 來更改此行為

"minutes"

"seconds"

<MobileTimePicker label={'"minutes"'} openTo="minutes" />
<MobileTimePicker
  label={'"seconds"'}
  openTo="seconds"
  views={['minutes', 'seconds']}
  format="mm:ss"
/>

<MobileTimePicker label={'"minutes"'} openTo="minutes" />
<MobileTimePicker
  label={'"seconds"'}
  openTo="seconds"
  views={['minutes', 'seconds']}
  format="mm:ss"
/>

按下 Enter 鍵開始編輯

橫向方向

預設情況下，時間選擇器元件會根據 window.orientation 值自動設定方向。

您可以使用 orientation prop 強制使用特定方向。

<StaticTimePicker orientation="landscape" />

<StaticTimePicker orientation="landscape" />

按下 Enter 鍵開始編輯

選擇時間檢視渲染器

您可以使用 viewRenderers prop 來更改用於渲染檢視的檢視。您可能有興趣在桌面以及行動裝置上使用時間時鐘而不是數位時鐘。

使用時間時鐘

<TimePicker
  label="With Time Clock"
  viewRenderers={{
    hours: renderTimeViewClock,
    minutes: renderTimeViewClock,
    seconds: renderTimeViewClock,
  }}
/>

<TimePicker
  label="With Time Clock"
  viewRenderers={{
    hours: renderTimeViewClock,
    minutes: renderTimeViewClock,
    seconds: renderTimeViewClock,
  }}
/>

按下 Enter 鍵開始編輯

本地化

有關更多詳細資訊，請參閱日期格式和本地化和已翻譯元件文件頁面。

驗證

有關更多詳細資訊，請參閱驗證文件頁面。

API

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