Material UI 是 React 应用中一个流行的 UI 框架，为开发者提供了多种组件来构建现代化的界面。其中，DesktopTimePicker 是一个专为桌面设备设计的时间选择器，支持用户选择具体的时间（小时和分钟）。它提供了丰富的 API 和灵活的自定义能力，能够满足多种时间选择需求。

本文将详细介绍 DesktopTimePicker API 的使用方法，涵盖其属性和方法，并通过多个示例代码展示其实际应用场景，帮助你快速掌握这一组件的使用技巧。

1. 什么是 DesktopTimePicker？

DesktopTimePicker 是 Material UI 提供的一个时间选择器组件，专门为桌面端优化。用户可以通过直观的界面选择时间，并支持格式化、步长调整以及禁用特定时间范围等功能。

2. 环境准备

在使用 DesktopTimePicker 前，请确保你的项目已安装必要的依赖：

npm install @mui/material @mui/x-date-pickers @emotion/react @emotion/styled

3. 快速入门示例

以下是一个最基本的 DesktopTimePicker 使用示例：

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

const BasicDesktopTimePicker = () => {
  const [value, setValue] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopTimePicker
        label="选择时间"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

export default BasicDesktopTimePicker;

4. 属性详解

以下是 DesktopTimePicker API 的核心属性及其详细说明：

5. 使用场景示例

示例 1：限制可选时间范围

通过 minTime 和 maxTime 属性，可以限制用户只能选择某个范围内的时间：

const LimitedTimePicker = () => {
  const [value, setValue] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopTimePicker
        label="选择时间"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        minTime={new Date(0, 0, 0, 9, 0)} // 09:00
        maxTime={new Date(0, 0, 0, 17, 0)} // 17:00
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

示例 2：禁用过去或未来时间

通过 disablePast 或 disableFuture 属性，可以限制用户只能选择过去或未来的时间：

const DisableFutureTimePicker = () => {
  const [value, setValue] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopTimePicker
        label="选择时间"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        disableFuture
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

示例 3：使用 24 小时制

通过 ampm 属性，可以切换时间显示为 24 小时制：

const TwentyFourHourTimePicker = () => {
  const [value, setValue] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopTimePicker
        label="选择时间"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        ampm={false} // 使用 24 小时制
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

示例 4：自定义分钟步长

通过 minutesStep 属性，可以设置分钟的选择步长：

const StepTimePicker = () => {
  const [value, setValue] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopTimePicker
        label="选择时间"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        minutesStep={15} // 每 15 分钟为一个步长
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

示例 5：结合 Snackbar 显示选中时间

通过 Snackbar 组件实时显示用户选择的时间：

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

const SnackbarTimePicker = () => {
  const [value, setValue] = useState(null);
  const [open, setOpen] = useState(false);

  const handleChange = (newValue) => {
    setValue(newValue);
    setOpen(true);
  };

  const handleClose = () => setOpen(false);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopTimePicker
        label="选择时间"
        value={value}
        onChange={handleChange}
        renderInput={(params) => <TextField {...params} />}
      />
      <Snackbar
        open={open}
        onClose={handleClose}
        autoHideDuration={3000}
        message={`选中时间: ${value?.toLocaleTimeString()}`}
      />
    </LocalizationProvider>
  );
};

6. 总结

DesktopTimePicker 是 Material UI 中一个功能强大的时间选择组件，尤其适合桌面端使用。它支持多种自定义配置，包括时间范围限制、步长设置、12/24 小时制切换等，可以满足各种时间选择需求。

通过本文详细的示例和属性讲解，你应该已经掌握了如何在项目中应用这一组件。如果你有任何疑问或需要进一步的帮助，请在下方留言！