跳转到内容

Time Picker 时间选择器

时间选择器允许用户选择一个单独的时间。

时间选择器允许用户选择一个单一的时间(格式为:小时:分钟)。 选定的时间由时针末端的填充圆圈表示。

基本用法

The time picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop.

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <TimePicker
    label="Basic example"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

静态模式

It's possible to render any time picker inline. 这将启用自定义弹出提示/模态框的容器。 This will enable building custom popover/modal containers.

Select time
:
123456789101112
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticTimePicker
    displayStaticWrapperAs="mobile"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

响应式

时间选择器组件是为它运行的设备设计和优化。

  • The MobileTimePicker component works best for touch devices and small screens.
  • The DesktopTimePicker component works best for mouse devices and large screens.

By default, the TimePicker component renders the desktop version if the media query @media (pointer: fine) matches. 你也可以使用 desktopModeMediaQuery 属性来自定义它。 This can be customized with the desktopModeMediaQuery prop.

Form props 表单的属性

The time picker component can be disabled or read-only.

Localization 本地化

使用 LocalizationProvider 来改变用于渲染时间选择器的数据引擎的本地化。 时间选择器会自动调整为当地时间,即 12 小时或 24 小时格式。 这可以通过 ampm 属性来控制。

⚠️ Missing demo `LocalizedTimePicker.js` ⚠️

验证时间

横屏

Select time
:
051015202530354045505500
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticTimePicker
    ampm
    orientation="landscape"
    openTo="minutes"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

子组件

Some lower-level sub-components (ClockPicker) are also exported. 这些都是在没有包装器或外部逻辑(屏蔽输入、日期值解析和验证等)的情况下渲染的。 These are rendered without a wrapper or outer logic (masked input, date values parsing and validation, etc.).

001234567891011121314151617181920212223
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <ClockPicker date={date} onChange={(newDate) => setDate(newDate)} />
</LocalizationProvider>

秒的输入可以用来选择一个精确的时间点。