Material UI 是一个功能丰富的 React 组件库，提供了一系列强大的日期和时间选择器。DesktopDatePicker 是其中专为桌面端设计的日期选择组件，为用户提供了一种直观、便捷的方式来选择日期。

本文将详细介绍 DesktopDatePicker API 的使用，包括属性说明、完整示例代码以及与其他组件结合的场景。

1. 什么是 DesktopDatePicker？

DesktopDatePicker 是 Material UI 提供的一个日期选择组件，专为桌面端设备设计。它支持鼠标和键盘交互，适用于需要直接输入日期或从弹出选择器中选择日期的场景。

主要特点

• 专为桌面端优化，提供精确的用户体验。
• 支持输入框和弹出日历视图。
• 灵活的属性配置，支持格式化、禁用特定日期等。
• 与 Material UI 的主题和样式系统无缝集成。

2. 安装依赖

在开始之前，确保已安装以下依赖：

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

3. 快速上手

基础示例

以下是 DesktopDatePicker 的一个简单实现：

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

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

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

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDatePicker
        label="选择日期"
        value={value}
        onChange={handleChange}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

export default BasicDesktopDatePicker;

运行此代码将展示一个基本的桌面日期选择器，支持从日历中选择日期或直接输入。

4. DesktopDatePicker API 属性说明

DesktopDatePicker 提供了一系列属性，允许开发者根据具体需求进行定制。

核心属性

样式属性

5. 示例代码

示例 1：限制日期范围

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

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

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

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

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDatePicker
        label="选择日期"
        value={value}
        onChange={handleChange}
        minDate={new Date(2023, 0, 1)} // 最小日期为 2023 年 1 月 1 日
        maxDate={new Date(2023, 11, 31)} // 最大日期为 2023 年 12 月 31 日
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

export default LimitedDatePicker;

示例 2：禁用特定日期

以下代码展示了如何禁用特定的日期，例如周末：

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

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

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

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

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDatePicker
        label="选择日期"
        value={value}
        onChange={handleChange}
        shouldDisableDate={disableWeekends}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

export default DisableWeekendsPicker;

示例 3：自定义样式

使用 sx 属性自定义日期选择器的样式：

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

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

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

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDatePicker
        label="选择日期"
        value={value}
        onChange={handleChange}
        renderInput={(params) => (
          <TextField
            {...params}
            sx={{
              '& .MuiInputBase-root': {
                backgroundColor: '#f0f0f0',
                borderRadius: '4px',
              },
              '& .Mui-focused .MuiInputBase-root': {
                backgroundColor: '#e0e0e0',
              },
            }}
          />
        )}
      />
    </LocalizationProvider>
  );
};

export default StyledDatePicker;

6. 与其他组件结合

DesktopDatePicker 可以与其他 Material UI 组件结合使用，例如 Dialog 和 Snackbar。

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

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

const PickerWithSnackbar = () => {
  const [value, setValue] = useState(new Date());
  const [snackbarOpen, setSnackbarOpen] = useState(false);

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

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

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDatePicker
        label="选择日期"
        value={value}
        onChange={handleChange}
        renderInput={(params) => <TextField {...params} />}
      />
      <Snackbar
        open={snackbarOpen}
        autoHideDuration={3000}
        onClose={handleClose}
        message={`你选择了 ${value.toLocaleDateString()}`}
      />
    </LocalizationProvider>
  );
};

export default PickerWithSnackbar;

7. 总结

DesktopDatePicker API 是一个功能强大且灵活的组件，非常适合桌面端日期选择需求。通过丰富的属性和事件回调，开发者可以轻松地自定义组件的外观和行为。结合 Material UI 的其他组件，DesktopDatePicker 更能提供卓越的用户体验。

希望本篇博客能够帮助你全面掌握 DesktopDatePicker 的使用。如果有任何问题或建议，欢迎在下方留言！