跳转到内容
编辑此页面

Time Picker 时间选择器

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

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

要求

该组件依赖于你所使用的日期管理库。 它支持 date-fns，luxon，dayjs，moment 以及其他任何使用公共 dateAdapter 接口的库。

请安装这些库中的任何一个，并使用 LocalizationProvider 来包裹到你的 root（或者包裹到该选择器你想要应用的最高位置）来设置正确的日期引擎。

// 或者使用 @material-ui/lab/Adapter{DayJS,Luxon,Moment} 或者使用任何可适用的 date-io 适配器
import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
import LocalizationProvider from '@material-ui/lab/LocalizationProvider';

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>...</LocalizationProvider>
  );
}

基本用法

时间选择器会自动调整到当地的时间设置，即 12 小时或 24 小时格式。 这可以通过 ampm 属性来控制。

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

Localization 本地化

使用 LocalizationProvider 来改变用于渲染时间选择器的数据引擎的本地化。 请注意， am/pm 的设置是自动切换的：

响应式

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

  • “手机（Mobile）”版本最适合触控设备和小型屏幕。
  • “桌面（Mobile）”版本最适合鼠标设备和大型屏幕。

默认情况下， TimePicker 组件使用 @media (pointer: fine) 媒体查询来确定使用哪个版本。 你也可以使用 desktopModeMediaQuery 属性来自定义它。

hh:mm (a|p)m

验证时间

静态模式

可以将任何选择器内嵌渲染。 这将启用自定义弹出提示/模态框的容器。

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

横屏

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

秒

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

API