Material UI 是一个流行的 React UI 框架，其中的 MobileDateRangePicker 是一个功能强大的移动端日期范围选择器，专为移动设备设计优化。本文将深入讲解 MobileDateRangePicker API 的使用，包括其属性、方法和事件，并结合其他组件，提供详细的代码示例，帮助开发者更高效地构建日期范围选择功能。

1. 什么是 MobileDateRangePicker？

MobileDateRangePicker 是 Material UI 提供的日期范围选择器组件，优化了触摸交互，适用于移动设备。它允许用户选择一个日期范围（起始日期和结束日期），并且支持多种自定义功能，如限制日期范围、格式化显示等。

2. 环境准备

在开始之前，请确保已安装 Material UI 和相关的日期选择器依赖。

安装必要依赖

运行以下命令安装依赖项：

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

配置项目入口

确保在应用中正确引入 React 和 Material UI 的核心模块：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

3. 基本用法示例

以下是 MobileDateRangePicker 的基本用法，结合 LocalizationProvider 和 AdapterDateFns：

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

const BasicExample = () => {
  const [dateRange, setDateRange] = useState([null, null]);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <MobileDateRangePicker
        startText="开始日期"
        endText="结束日期"
        value={dateRange}
        onChange={(newValue) => setDateRange(newValue)}
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} />
            <TextField {...endProps} />
          </>
        )}
      />
    </LocalizationProvider>
  );
};

export default BasicExample;

4. MobileDateRangePicker 的核心属性详解

5. 进阶使用场景

示例 1：限制可选择日期范围

通过 minDate 和 maxDate 属性限制用户只能选择特定范围内的日期。

const LimitedRangeExample = () => {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <MobileDateRangePicker
        startText="开始日期"
        endText="结束日期"
        minDate={new Date('2023-01-01')}
        maxDate={new Date('2023-12-31')}
        onChange={(newValue) => console.log('Selected Range:', newValue)}
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} />
            <TextField {...endProps} />
          </>
        )}
      />
    </LocalizationProvider>
  );
};

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

可以通过 disablePast 和 disableFuture 属性禁用过去或未来的日期。

const DisableDatesExample = () => {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <MobileDateRangePicker
        startText="开始日期"
        endText="结束日期"
        disablePast
        disableFuture
        onChange={(newValue) => console.log('Selected Range:', newValue)}
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} />
            <TextField {...endProps} />
          </>
        )}
      />
    </LocalizationProvider>
  );
};

示例 3：多语言支持

通过 localeText 属性自定义文本。

const LocaleExample = () => {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <MobileDateRangePicker
        startText="选择起始日期"
        endText="选择结束日期"
        localeText={{
          cancelButtonText: '取消',
          okButtonText: '确定',
        }}
        onChange={(newValue) => console.log('Selected Range:', newValue)}
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} />
            <TextField {...endProps} />
          </>
        )}
      />
    </LocalizationProvider>
  );
};

示例 4：结合 Material UI 的 Snackbar 组件

以下示例展示如何使用 Snackbar 显示用户选择的日期范围：

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

const SnackbarExample = () => {
  const [dateRange, setDateRange] = useState([null, null]);
  const [open, setOpen] = useState(false);

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

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <MobileDateRangePicker
        startText="开始日期"
        endText="结束日期"
        value={dateRange}
        onChange={handleChange}
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} />
            <TextField {...endProps} />
          </>
        )}
      />
      <Snackbar
        open={open}
        autoHideDuration={3000}
        onClose={() => setOpen(false)}
        message={`已选择日期范围: ${dateRange[0]?.toLocaleDateString()} - ${dateRange[1]?.toLocaleDateString()}`}
      />
    </LocalizationProvider>
  );
};

6. 注意事项

1. 选择适配器：确保正确选择适配器（date-fns、moment 或 dayjs），并根据项目需求设置格式。
2. 优化性能：如果需要处理大范围日期选择，可通过优化 renderInput 和 onChange 函数提升性能。
3. 移动设备体验：MobileDateRangePicker 专为移动端设计，尽量避免在桌面端使用。

7. 总结

MobileDateRangePicker API 提供了灵活的日期范围选择功能，尤其适合移动设备场景。本篇博客通过基础和进阶示例，详细说明了其属性和使用场景，同时结合了 Material UI 的其他组件如 Snackbar，展示了如何构建更加动态的用户界面。

希望本文对你有所帮助！如有疑问，欢迎在评论区留言讨论！