Date Time Range Field 是 Material UI 提供的一个强大组件，用于选择一段时间的日期和时间，适合用于日历、任务管理、数据分析等多种应用场景。本文将深入探讨 Date Time Range Field 的使用方法、属性及方法，并结合其他组件的使用场景，提供详细的示例代码。

1. 前期准备

1.1 安装依赖

在开始使用 Date Time Range Field 之前，确保你的项目中安装了以下依赖：

npm install @mui/material @mui/x-date-pickers @mui/x-date-pickers-pro date-fns

1.2 导入必要的组件

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

2. 基本用法

下面是一个简单的 Date Time Range Field 示例，展示了如何创建一个基本的日期时间范围输入框。

2.1 组件示例

function BasicDateTimeRangeField() {
  const [value, setValue] = useState([null, null]);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateTimeRangeField
        value={value}
        onChange={(newValue) => setValue(newValue)}
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} label="开始时间" variant="outlined" />
            <TextField {...endProps} label="结束时间" variant="outlined" />
          </>
        )}
      />
    </LocalizationProvider>
  );
}

2.2 代码解析

• value: 用于存储选择的日期时间范围，格式为 [startDate, endDate]。
• onChange: 当用户选择新的日期时间范围时调用的回调函数。
• renderInput: 自定义输入框的渲染方式，返回两个 TextField 组件用于分别输入开始时间和结束时间。

3. 属性详解

3.1 必须属性

• value: 一个数组，格式为 [startDate, endDate]，用于跟踪选定的日期时间范围。
• onChange: 当用户选择新的日期时间范围时调用的函数。

3.2 可选属性

• minDateTime: 设定选择的最早日期和时间。可以限制用户选择的开始时间。

  <DateTimeRangeField
    minDateTime={new Date(2023, 0, 1, 0, 0)} // 从2023年1月1日0点开始
  />
  

• maxDateTime: 设定选择的最晚日期和时间。

  <DateTimeRangeField
    maxDateTime={new Date(2023, 11, 31, 23, 59)} // 到2023年12月31日23点59分结束
  />
  

• shouldDisableDate: 自定义逻辑以禁用某些特定日期。例如，禁用周日：

  <DateTimeRangeField
    shouldDisableDate={(date) => date.getDay() === 0} // 禁用所有周日
  />
  

• localeText: 自定义显示的文本，比如输入框的提示文本。

  <DateTimeRangeField
    localeText={{ start: '开始时间', end: '结束时间' }}
  />
  

• sx: 用于样式调整，可以自定义输入框的样式，例如背景色和字体颜色。

  <DateTimeRangeField
    sx={{
      '& .MuiOutlinedInput-root': {
        backgroundColor: '#f5f5f5',
      }
    }}
  />
  

4. 进阶示例与应用场景

4.1 日期时间范围选择表单

以下示例展示了一个包含 DateTimeRangeField 的表单，用户提交时会校验日期时间范围是否有效。

function DateTimeRangeForm() {
  const [value, setValue] = useState([null, null]);
  const [error, setError] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    const [start, end] = value;
    if (!start || !end) {
      setError(true);
    } else {
      setError(false);
      alert(`选择的日期时间范围：${start.toLocaleString()} - ${end.toLocaleString()}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DateTimeRangeField
          value={value}
          onChange={(newValue) => setValue(newValue)}
          renderInput={(startProps, endProps) => (
            <>
              <TextField {...startProps} label="开始时间" variant="outlined" />
              <TextField {...endProps} label="结束时间" variant="outlined" />
            </>
          )}
        />
      </LocalizationProvider>
      {error && <p style={{ color: 'red' }}>请选择完整的日期时间范围</p>}
      <Button type="submit" variant="contained" color="primary">提交</Button>
    </form>
  );
}

4.2 数据筛选功能

可以结合 DataGrid 组件与 DateTimeRangeField 实现基于时间范围的筛选功能。以下示例展示了如何实现：

import { DataGrid } from '@mui/x-data-grid';

const initialData = [
  { id: 1, name: 'Alice', dateTime: new Date(2023, 0, 1, 9, 0) },
  { id: 2, name: 'Bob', dateTime: new Date(2023, 0, 1, 14, 30) },
  // 更多数据...
];

function DateTimeRangeFilterTable() {
  const [value, setValue] = useState([null, null]);
  const [filteredData, setFilteredData] = useState(initialData);

  const handleFilter = () => {
    if (value[0] && value[1]) {
      const newData = initialData.filter((row) => {
        return row.dateTime >= value[0] && row.dateTime <= value[1];
      });
      setFilteredData(newData);
    }
  };

  return (
    <div>
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DateTimeRangeField
          value={value}
          onChange={(newValue) => setValue(newValue)}
          renderInput={(startProps, endProps) => (
            <>
              <TextField {...startProps} label="开始时间" variant="outlined" />
              <TextField {...endProps} label="结束时间" variant="outlined" />
            </>
          )}
        />
      </LocalizationProvider>
      <Button variant="contained" onClick={handleFilter}>应用过滤</Button>
      <DataGrid rows={filteredData} columns={[{ field: 'id' }, { field: 'name' }, { field: 'dateTime', type: 'dateTime' }]} />
    </div>
  );
}

4.3 动态时间范围限制

可以根据用户输入动态设置日期时间范围的限制：

function DynamicDateTimeRangeField() {
  const [value, setValue] = useState([null, null]);
  const [minDate, setMinDate] = useState(new Date());

  const handleMinDateChange = (event) => {
    setMinDate(new Date(event.target.value));
  };

  return (
    <div>
      <TextField
        type="date"
        label="设置最早开始时间"
        onChange={handleMinDateChange}
        variant="outlined"
      />
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DateTimeRangeField
          value={value}
          onChange={(newValue) => setValue(newValue)}
          minDateTime={minDate}
          renderInput={(startProps, endProps) => (
            <>
              <TextField {...startProps} label="开始时间" variant="outlined" />
              <TextField {...endProps} label="结束时间" variant="outlined" />
            </>
          )}
        />
      </LocalizationProvider>
    </div>
  );
}

5. 总结

本文详细介绍了 Material UI 中 Date Time Range Field 组件的使用，包括基本用法、常用属性及与其他组件的结合应用。通过多个示例，展示了该组件在实际开发中的灵活性和便利性。希望这些信息能帮助你更好地使用 Date Time Range Field 组件来构建出功能丰富的应用。