Material UI 是一个现代化、灵活的 React UI 库，提供了丰富的组件来帮助开发者快速构建优美的界面。DesktopDateTimePicker 是一个专为桌面端设计的日期和时间选择器，提供直观的交互体验和强大的自定义能力。

在这篇文章中，我们将详细介绍 DesktopDateTimePicker API 的使用方法，包括核心功能、属性解释、示例代码以及与其他组件的结合使用，帮助你在项目中灵活运用这一组件。

1. 什么是 DesktopDateTimePicker？

DesktopDateTimePicker 是 Material UI 提供的一个桌面端日期时间选择器组件，用于选择具体的日期和时间。它与桌面设备上的用户交互行为高度一致，并支持高度自定义。

特点

• 日期与时间集成：支持同时选择日期和时间。
• 优化桌面端交互：以弹出面板形式显示，操作便捷。
• 灵活性：支持多种属性和方法，满足不同场景需求。
• 无缝集成：与 Material UI 的其他组件和样式系统完美结合。

2. 环境准备

在开始使用 DesktopDateTimePicker 之前，请确保安装了所需的依赖包：

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

3. 快速入门

以下是一个简单的 DesktopDateTimePicker 使用示例：

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

const BasicDesktopDateTimePicker = () => {
  const [value, setValue] = useState(new Date());

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

export default BasicDesktopDateTimePicker;

4. 属性详解

以下是 DesktopDateTimePicker API 提供的核心属性及其说明：

5. 使用场景示例

示例 1：限制日期范围

以下代码展示了如何通过 minDate 和 maxDate 限制用户只能选择特定日期范围内的日期和时间：

const LimitedDateTimePicker = () => {
  const [value, setValue] = useState(new Date());

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDateTimePicker
        label="选择日期和时间"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        minDate={new Date(2023, 0, 1)} // 2023年1月1日
        maxDate={new Date(2023, 11, 31)} // 2023年12月31日
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

示例 2：禁用过去或未来日期

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

const FutureOnlyDateTimePicker = () => {
  const [value, setValue] = useState(new Date());

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDateTimePicker
        label="选择未来的日期和时间"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        disablePast
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

示例 3：设置分钟步长

如果你想让用户只能选择每隔 15 分钟的时间，可以使用 minutesStep 属性：

const StepDateTimePicker = () => {
  const [value, setValue] = useState(new Date());

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDateTimePicker
        label="选择日期和时间（每15分钟）"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        minutesStep={15}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

示例 4：自定义日期格式

通过 inputFormat 属性，你可以定义输入框显示的日期时间格式：

const CustomFormatDateTimePicker = () => {
  const [value, setValue] = useState(new Date());

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDateTimePicker
        label="选择日期和时间"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        inputFormat="yyyy/MM/dd hh:mm a"
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

示例 5：结合 Snackbar 显示结果

以下示例展示了如何结合 Snackbar 组件，实时显示用户选择的日期和时间：

const SnackbarDateTimePicker = () => {
  const [value, setValue] = useState(new Date());
  const [open, setOpen] = useState(false);

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

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

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDateTimePicker
        label="选择日期和时间"
        value={value}
        onChange={handleChange}
        renderInput={(params) => <TextField {...params} />}
      />
      <Snackbar
        open={open}
        onClose={handleClose}
        autoHideDuration={3000}
        message={`你选择了：${value?.toLocaleString()}`}
      />
    </LocalizationProvider>
  );
};

6. 总结

DesktopDateTimePicker 是一个功能强大、使用灵活的日期时间选择组件，专为桌面端设计。通过本文的详细讲解和丰富示例，你可以轻松掌握它的使用方法并将其应用到你的项目中。

如果你有任何疑问或建议，请在下方留言！