Material UI 提供的 Time Picker 组件是一种便捷的时间选择器，能够帮助用户轻松选择特定时间。它适用于需要精确到小时和分钟的应用场景，例如预约系统、任务时间安排等。本文将详细介绍 Time Picker 的所有用法，涵盖其所有属性和方法，并结合不同的组件展示多种用法场景，帮助你灵活运用 Time Picker 组件。

1. 基本用法

1.1 安装依赖

确保在项目中安装了 @mui/material 和 @mui/x-date-pickers 包：

npm install @mui/material @mui/x-date-pickers date-fns

1.2 引入和使用 Time Picker 组件

首先，创建一个简单的 Time Picker 组件：

import React, { useState } from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';

export default function BasicTimePicker() {
  const [selectedTime, setSelectedTime] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <TimePicker
        label="选择时间"
        value={selectedTime}
        onChange={(newValue) => setSelectedTime(newValue)}
      />
    </LocalizationProvider>
  );
}

在这个示例中：

• 使用 LocalizationProvider 和 AdapterDateFns 作为时间适配器，支持 date-fns。
• TimePicker 组件的 label 属性指定了提示标签，value 和 onChange 控制选择的时间。

2. 主要属性详解

2.1 value 和 onChange

• value：当前选中的时间，通常是 Date 对象或 null。
• onChange：时间改变时触发的回调函数，接收一个新的 Date 对象作为参数。

示例：

<TimePicker
  label="选择时间"
  value={selectedTime}
  onChange={(newValue) => setSelectedTime(newValue)}
/>

2.2 minTime 和 maxTime

• minTime：指定用户可以选择的最小时间。
• maxTime：指定用户可以选择的最大时间。

此属性适合用于限制时间范围，比如一个餐厅的预约时间。

<TimePicker
  label="选择时间"
  value={selectedTime}
  onChange={(newValue) => setSelectedTime(newValue)}
  minTime={new Date(0, 0, 0, 9, 0)} // 最早 9:00
  maxTime={new Date(0, 0, 0, 18, 0)} // 最晚 18:00
/>

2.3 disablePast 和 disableFuture

• disablePast：禁用当前时间之前的时间选择。
• disableFuture：禁用当前时间之后的时间选择。

<TimePicker
  label="选择时间"
  value={selectedTime}
  onChange={(newValue) => setSelectedTime(newValue)}
  disablePast
/>

当设置 disablePast 时，用户只能选择当前时间及以后的时间。

2.4 shouldDisableTime

• shouldDisableTime：允许你自定义禁用某些特定的时间。它接受一个回调函数，在选择的小时或分钟满足特定条件时返回 true。

<TimePicker
  label="选择时间"
  value={selectedTime}
  onChange={(newValue) => setSelectedTime(newValue)}
  shouldDisableTime={(timeValue, clockType) => clockType === 'minutes' && timeValue % 5 !== 0}
/>

在此示例中，shouldDisableTime 会禁用非 5 分钟间隔的分钟数。

2.5 ampm

• ampm：控制是否启用 12 小时制。默认为 true，即使用 AM/PM 模式。设置为 false 则启用 24 小时制。

<TimePicker
  label="选择时间"
  value={selectedTime}
  onChange={(newValue) => setSelectedTime(newValue)}
  ampm={false} // 24 小时制
/>

3. 结合其他属性和事件处理

3.1 views

views 属性用于控制用户可以选择的时间单位，支持 ['hours', 'minutes', 'seconds']。

<TimePicker
  label="选择时间"
  value={selectedTime}
  onChange={(newValue) => setSelectedTime(newValue)}
  views={['hours', 'minutes']} // 仅支持选择小时和分钟
/>

在该示例中，TimePicker 只允许用户选择小时和分钟。

3.2 openTo

• openTo：设置初始打开时默认显示的选择项。

<TimePicker
  label="选择时间"
  value={selectedTime}
  onChange={(newValue) => setSelectedTime(newValue)}
  openTo="minutes" // 初始时打开分钟选择
/>

设置 openTo 为 minutes，当用户打开选择器时直接展示分钟选择。

4. 高级用法：国际化和自定义适配器

4.1 国际化支持

通过 LocalizationProvider 提供的 locale 属性可实现国际化支持。以下是将 TimePicker 设置为中文的示例：

import { zhCN } from 'date-fns/locale';

export default function ChineseTimePicker() {
  const [selectedTime, setSelectedTime] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} locale={zhCN}>
      <TimePicker
        label="选择时间"
        value={selectedTime}
        onChange={(newValue) => setSelectedTime(newValue)}
      />
    </LocalizationProvider>
  );
}

4.2 使用 Moment.js 适配器

TimePicker 也支持使用 Moment.js 作为日期库：

import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';

export default function MomentTimePicker() {
  const [selectedTime, setSelectedTime] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterMoment}>
      <TimePicker
        label="选择时间"
        value={selectedTime}
        onChange={(newValue) => setSelectedTime(newValue)}
      />
    </LocalizationProvider>
  );
}

5. 结合其他组件的使用

5.1 与表单组合

TimePicker 可以和其他表单组件结合使用。以下是一个简易的表单示例：

import { Button } from '@mui/material';

export default function TimePickerForm() {
  const [selectedTime, setSelectedTime] = useState(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Selected Time: ${selectedTime}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <TimePicker
          label="选择时间"
          value={selectedTime}
          onChange={(newValue) => setSelectedTime(newValue)}
        />
      </LocalizationProvider>
      <Button type="submit" variant="contained" color="primary">
        Submit
      </Button>
    </form>
  );
}

此示例展示了如何将 TimePicker 与表单中的按钮一起使用，以便提交选择的时间。

5.2 与 Grid 布局结合

使用 Grid 布局组件可以创建更具响应性的时间选择布局：

import Grid from '@mui/material/Grid';

export default function TimePickerWithGrid() {
  const [startTime, setStartTime] = useState(null);
  const [endTime, setEndTime] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Grid container spacing={2}>
        <Grid item xs={6}>
          <TimePicker
            label="开始时间"
            value={startTime}
            onChange={(newValue) => setStartTime(newValue)}
          />
        </Grid>
        <Grid item xs={6}>
          <TimePicker
            label="结束时间"
            value={endTime}
            onChange={(newValue) => setEndTime(newValue)}
          />
        </Grid>
      </Grid>
    </LocalizationProvider>
  );
}

在该示例中，通过 Grid 布局组件可以将两个时间选择器并排展示，适合需要选择时间范围的场景。

6. 总结

Time Picker 是 Material UI 提供的强大且灵活的时间选择组件。通过详细配置其属性和方法，可以自定义其

显示效果和功能。结合 Grid 等布局组件和其他表单元素，Time Picker 能在实际应用中提供更加友好和高效的用户体验。