日期時間選擇器

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

基本用法

基本日期時間選擇器

<DateTimePicker label="Basic date time picker" />

<DateTimePicker label="Basic date time picker" />

按下 Enter 鍵開始編輯

元件組成

此元件使用 DateTimeField 進行鍵盤編輯，DateCalendar 進行日期檢視編輯，DigitalClock 進行桌面檢視編輯，以及 TimeClock 進行行動時間檢視編輯。

查看其文件頁面以獲取更多資訊

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

非受控值 vs. 受控值

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

非受控選擇器

受控選擇器

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

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

按下 Enter 鍵開始編輯

可用元件

該元件有四種變體可用

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

桌面變體

行動變體

響應式變體

靜態變體

April 2022

日一二三四五六

<DemoItem label="Desktop variant">
  <DesktopDateTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Mobile variant">
  <MobileDateTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Responsive variant">
  <DateTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Static variant">
  <StaticDateTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>

<DemoItem label="Desktop variant">
  <DesktopDateTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Mobile variant">
  <MobileDateTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Responsive variant">
  <DateTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Static variant">
  <StaticDateTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>

按下 Enter 鍵開始編輯

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

表單 props

元件可以被禁用或唯讀。

已禁用

唯讀

名稱

<DateTimePicker label="disabled" disabled />
<DateTimePicker label="readOnly" readOnly />
<DateTimePicker label="name" name="startDateTime" />

<DateTimePicker label="disabled" disabled />
<DateTimePicker label="readOnly" readOnly />
<DateTimePicker label="name" name="startDateTime" />

按下 Enter 鍵開始編輯

視圖

該元件支援六種視圖：day、month、year、hours、minutes 和 seconds。

預設情況下，year、day、hours 和 minutes 視圖已啟用。使用 views prop 更改此行為

"year"、"month"、"day"、"hours"、"minutes" 和 "seconds"

"day"、"hours"

"year"、"day"、"hours"、"minutes"、"seconds"

<DemoItem
  label={'"year"", "month", "day", "hours", "minutes" and "seconds"'}
>
  <DateTimePicker
    views={['year', 'month', 'day', 'hours', 'minutes', 'seconds']}
  />
</DemoItem>
<DemoItem label={'"day", "hours"'}>
  <DateTimePicker views={['day', 'hours']} />
</DemoItem>
<DemoItem label={'"year", "day", "hours", "minutes", "seconds"'}>
  <DateTimePicker views={['year', 'day', 'hours', 'minutes', 'seconds']} />
</DemoItem>

<DemoItem
  label={'"year"", "month", "day", "hours", "minutes" and "seconds"'}
>
  <DateTimePicker
    views={['year', 'month', 'day', 'hours', 'minutes', 'seconds']}
  />
</DemoItem>
<DemoItem label={'"day", "hours"'}>
  <DateTimePicker views={['day', 'hours']} />
</DemoItem>
<DemoItem label={'"year", "day", "hours", "minutes", "seconds"'}>
  <DateTimePicker views={['year', 'day', 'hours', 'minutes', 'seconds']} />
</DemoItem>

按下 Enter 鍵開始編輯

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

"year"

"hours"

<DateTimePicker label={'"year"'} openTo="year" />
<MobileTimePicker label={'"hours"'} openTo="hours" />

<DateTimePicker label={'"year"'} openTo="year" />
<MobileTimePicker label={'"hours"'} openTo="hours" />

按下 Enter 鍵開始編輯

橫向

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

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

March 2025

日一二三四五六

<StaticDateTimePicker orientation="landscape" />

<StaticDateTimePicker orientation="landscape" />

按下 Enter 鍵開始編輯

選擇時間視圖渲染器

您可以使用 viewRenderers prop 更改用於渲染視圖的視圖。您可能有興趣使用時間時鐘而不是數位時鐘，或者完全移除時間視圖渲染，而僅使用欄位來輸入時間。

使用時間時鐘

不使用視圖渲染器

<DateTimePicker
  label="With Time Clock"
  viewRenderers={{
    hours: renderTimeViewClock,
    minutes: renderTimeViewClock,
    seconds: renderTimeViewClock,
  }}
/>
<DateTimePicker
  label="Without view renderers"
  viewRenderers={{
    hours: null,
    minutes: null,
    seconds: null,
  }}
/>

<DateTimePicker
  label="With Time Clock"
  viewRenderers={{
    hours: renderTimeViewClock,
    minutes: renderTimeViewClock,
    seconds: renderTimeViewClock,
  }}
/>
<DateTimePicker
  label="Without view renderers"
  viewRenderers={{
    hours: null,
    minutes: null,
    seconds: null,
  }}
/>

按下 Enter 鍵開始編輯

日期時間選擇器

基本用法

元件組成

非受控值 vs. 受控值

可用元件

表單 props

視圖

橫向

選擇時間視圖渲染器

在地化

驗證

API