时间选择器

时间选择器组件允许用户选择时间。

基本用法

基本时间选择器

<TimePicker label="Basic time picker" />

<TimePicker label="Basic time picker" />

按 Enter 开始编辑

组件构成

该组件使用 TimeField 进行键盘编辑，使用 DigitalClock 进行桌面视图编辑，并使用 TimeClock 进行移动视图编辑。

查看它们的文档页面以获取更多信息

您可以在专门的 API 页面上查看组合组件的可用 props。某些 TimeField props 在 Picker 组件上不可用，您可以使用 slotProps.field 将它们传递到字段。

非受控 vs. 受控值

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

非受控选择器

受控选择器

<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 开始编辑

横向方向

默认情况下，Time Picker 组件根据 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 和类的完整参考。