Material UI 是一个功能丰富、设计现代的 React UI 框架，为开发者提供了许多强大的组件，简化复杂的界面开发工作。DesktopDateTimeRangePicker 是其日期时间组件家族中的一员，专为桌面端设计，允许用户选择日期和时间范围。

在这篇文章中，我们将详细讲解 DesktopDateTimeRangePicker API 的使用方法，覆盖其所有的属性和方法，配合详细的示例代码，帮助你更好地理解和应用这一组件。

1. 什么是 DesktopDateTimeRangePicker？

DesktopDateTimeRangePicker 是一个支持选择开始时间和结束时间的日期时间范围选择器，专为桌面用户设计。它提供了丰富的配置选项和直观的交互体验，支持自定义格式、范围限制等功能，适合各种需要选择时间范围的场景。

2. 环境准备

在开始使用 DesktopDateTimeRangePicker 之前，请确保安装了以下依赖：

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

3. 快速入门示例

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

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

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

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDateTimeRangePicker
        startText="开始时间"
        endText="结束时间"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} />
            <span style={{ margin: '0 10px' }}>至</span>
            <TextField {...endProps} />
          </>
        )}
      />
    </LocalizationProvider>
  );
};

export default BasicDesktopDateTimeRangePicker;

4. 属性详解

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

5. 使用场景示例

示例 1：限制日期范围

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

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

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDateTimeRangePicker
        startText="开始时间"
        endText="结束时间"
        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={(startProps, endProps) => (
          <>
            <TextField {...startProps} />
            <span style={{ margin: '0 10px' }}>至</span>
            <TextField {...endProps} />
          </>
        )}
      />
    </LocalizationProvider>
  );
};

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

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

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

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDateTimeRangePicker
        startText="开始时间"
        endText="结束时间"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        disableFuture
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} />
            <span style={{ margin: '0 10px' }}>至</span>
            <TextField {...endProps} />
          </>
        )}
      />
    </LocalizationProvider>
  );
};

示例 3：自定义日期时间格式

通过 inputFormat 属性，可以设置输入框中显示的日期时间格式：

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

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDateTimeRangePicker
        startText="开始时间"
        endText="结束时间"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} helperText="格式: yyyy/MM/dd hh:mm a" />
            <span style={{ margin: '0 10px' }}>至</span>
            <TextField {...endProps} helperText="格式: yyyy/MM/dd hh:mm a" />
          </>
        )}
      />
    </LocalizationProvider>
  );
};

示例 4：结合 Snackbar 显示选择结果

以下示例展示如何结合 Material UI 的 Snackbar 组件实时显示用户选择的时间范围：

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

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

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

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

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDateTimeRangePicker
        startText="开始时间"
        endText="结束时间"
        value={value}
        onChange={handleChange}
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} />
            <span style={{ margin: '0 10px' }}>至</span>
            <TextField {...endProps} />
          </>
        )}
      />
      <Snackbar
        open={open}
        onClose={handleClose}
        autoHideDuration={3000}
        message={`选择范围: ${value[0]?.toLocaleString()} 至 ${value[1]?.toLocaleString()}`}
      />
    </LocalizationProvider>
  );
};

6. 总结

DesktopDateTimeRangePicker 是一个功能强大、易于使用的组件，非常适合桌面端应用中的时间范围选择场景。它提供了多种自定义选项，能够轻松适应不同的业务需求。

通过本文的详细介绍和丰富示例，你可以轻松掌握这一组件的使用方法，并将其灵活应用到实际项目中。如果你有任何问题或需要进一步的帮助，请在下方留言！