Material UI 是一个全面且现代化的 React UI 库，提供多种实用的组件，其中日期选择功能尤为强大。DesktopDateRangePicker 是专为桌面端设计的日期范围选择组件，能够帮助用户轻松选择两个日期之间的范围。

本文将详细介绍 DesktopDateRangePicker API 的使用，包括功能说明、完整示例代码及与其他组件的结合场景，帮助你全面掌握它的使用方法。

1. 什么是 DesktopDateRangePicker？

DesktopDateRangePicker 是 Material UI 提供的日期范围选择器，专为桌面端优化，具有以下特点：

• 范围选择功能：支持选择起始日期和结束日期。
• 弹出式日历视图：以用户友好的方式显示日期选择界面。
• 可定制化：支持多种属性，允许灵活配置。
• 无缝集成 Material UI 样式和主题系统。

2. 安装依赖

在使用 DesktopDateRangePicker 之前，需要确保安装以下依赖：

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

3. 快速上手

以下是一个基础的 DesktopDateRangePicker 示例：

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

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

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDateRangePicker
        startText="开始日期"
        endText="结束日期"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        renderInput={(startProps, endProps) => (
          <Box display="flex" gap={2}>
            <TextField {...startProps} />
            <TextField {...endProps} />
          </Box>
        )}
      />
    </LocalizationProvider>
  );
};

export default BasicDesktopDateRangePicker;

运行此代码后，你将看到一个简单的桌面日期范围选择器。

4. DesktopDateRangePicker API 属性详解

以下是 DesktopDateRangePicker 提供的主要属性：

核心属性

5. 使用场景示例

示例 1：限制日期范围

以下代码展示了如何限制用户只能选择特定日期范围内的日期：

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

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDateRangePicker
        startText="开始日期"
        endText="结束日期"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        minDate={new Date(2023, 0, 1)}
        maxDate={new Date(2023, 11, 31)}
        renderInput={(startProps, endProps) => (
          <Box display="flex" gap={2}>
            <TextField {...startProps} />
            <TextField {...endProps} />
          </Box>
        )}
      />
    </LocalizationProvider>
  );
};

用户只能选择 2023 年内的日期。

示例 2：禁用周末

通过 shouldDisableDate 属性，禁用用户选择周六和周日：

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

  const disableWeekends = (date) => {
    const day = date.getDay();
    return day === 0 || day === 6; // 禁用周六和周日
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDateRangePicker
        startText="开始日期"
        endText="结束日期"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        shouldDisableDate={disableWeekends}
        renderInput={(startProps, endProps) => (
          <Box display="flex" gap={2}>
            <TextField {...startProps} />
            <TextField {...endProps} />
          </Box>
        )}
      />
    </LocalizationProvider>
  );
};

示例 3：自定义日期格式

通过 inputFormat 属性，设置输入框显示的日期格式：

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

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDateRangePicker
        startText="开始日期"
        endText="结束日期"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        inputFormat="yyyy/MM/dd"
        renderInput={(startProps, endProps) => (
          <Box display="flex" gap={2}>
            <TextField {...startProps} />
            <TextField {...endProps} />
          </Box>
        )}
      />
    </LocalizationProvider>
  );
};

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

将日期范围选择器与 Snackbar 组件结合，实时显示用户选择的日期范围：

const SnackbarDateRangePicker = () => {
  const [value, setValue] = useState([null, null]);
  const [snackbarOpen, setSnackbarOpen] = useState(false);

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

  const handleClose = () => {
    setSnackbarOpen(false);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDateRangePicker
        startText="开始日期"
        endText="结束日期"
        value={value}
        onChange={handleChange}
        renderInput={(startProps, endProps) => (
          <Box display="flex" gap={2}>
            <TextField {...startProps} />
            <TextField {...endProps} />
          </Box>
        )}
      />
      <Snackbar
        open={snackbarOpen}
        autoHideDuration={3000}
        onClose={handleClose}
        message={`选中的日期范围是：${value[0]?.toLocaleDateString()} 到 ${value[1]?.toLocaleDateString()}`}
      />
    </LocalizationProvider>
  );
};

6. 总结

DesktopDateRangePicker 是一个功能强大且灵活的日期范围选择组件，特别适合桌面端的日期选择场景。它支持多种配置和样式自定义，可以与 Material UI 的其他组件轻松集成，提供卓越的用户体验。

希望通过本文，你能全面掌握 DesktopDateRangePicker API 的使用。如果有任何问题或建议，欢迎在下方留言！