Matarialize中文技术社区-使用 Material-UI 的 DateRangeCalendar API 详解

使用 Material-UI 的 DateRangeCalendar API 详解

smartzeng 2024-11-04 21:54:41

51 DateRangeCalendar 专栏

在现代应用开发中，日期范围选择器是用户界面设计的重要组成部分，特别是在数据筛选、事件安排等场景中。Material-UI 提供了 DateRangeCalendar 组件，允许开发者轻松创建用户友好的日期范围选择器。在本文中，我们将详细介绍 DateRangeCalendar API 的使用，包括其属性、方法，以及结合其他组件的示例代码。

1. 什么是 DateRangeCalendar？

DateRangeCalendar 是 Material-UI 日期选择组件的一部分，用于选择开始和结束日期。它提供了直观的界面，让用户可以通过日历界面选择日期范围。

2. 安装 Material-UI 日期选择器

在使用 DateRangeCalendar 之前，请确保您的项目中已经安装了 Material-UI 的核心库和日期选择器库：

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

3. DateRangeCalendar API 概述

3.1 主要属性

startDate: 选中的开始日期，类型为 Date。
endDate: 选中的结束日期，类型为 Date。
onChange: 当日期范围发生变化时调用的回调函数，接收新的开始和结束日期作为参数。
minDate: 允许选择的最小日期。
maxDate: 允许选择的最大日期。
disablePast: 布尔值，禁用过去的日期选择。
renderInput: 自定义输入框的渲染函数。

3.2 事件和方法

onChange: 接收 (startDate, endDate) 的回调函数。
isDateDisabled: 用于禁用特定日期的函数。

4. 使用 DateRangeCalendar 的基本示例

以下是一个基本的日期范围选择器示例，使用 DateRangeCalendar 进行日期范围选择。

4.1 导入所需组件

首先，我们需要导入所需的组件和工具。

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

4.2 创建日期范围选择器

下面是一个简单的日期范围选择器示例，展示了如何使用 DateRangeCalendar。

const MyDateRangePicker = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleChange = (newStartDate, newEndDate) => {
    setStartDate(newStartDate);
    setEndDate(newEndDate);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateRangeCalendar
        startDate={startDate}
        endDate={endDate}
        onChange={handleChange}
        renderInput={({ inputProps }) => (
          <TextField {...inputProps} variant="outlined" label="选择日期范围" />
        )}
      />
      <Button
        variant="contained"
        onClick={() => alert(`选择的日期范围: ${startDate} 到 ${endDate}`)}
      >
        提交
      </Button>
    </LocalizationProvider>
  );
};

export default MyDateRangePicker;

5. DateRangeCalendar 的高级用法

5.1 添加最小和最大日期

我们可以为 DateRangeCalendar 添加最小和最大日期限制，以控制用户的选择范围。

const MyLimitedDateRangePicker = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleChange = (newStartDate, newEndDate) => {
    setStartDate(newStartDate);
    setEndDate(newEndDate);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateRangeCalendar
        startDate={startDate}
        endDate={endDate}
        onChange={handleChange}
        minDate={new Date(2023, 0, 1)}  // 允许选择的最小日期
        maxDate={new Date(2023, 11, 31)} // 允许选择的最大日期
        renderInput={({ inputProps }) => (
          <TextField {...inputProps} variant="outlined" label="选择日期范围" />
        )}
      />
      <Button
        variant="contained"
        onClick={() => alert(`选择的日期范围: ${startDate} 到 ${endDate}`)}
      >
        提交
      </Button>
    </LocalizationProvider>
  );
};

export default MyLimitedDateRangePicker;

5.2 禁用过去的日期

可以通过 disablePast 属性来禁用用户选择过去的日期，确保用户只能选择今天及未来的日期。

const MyNoPastDateRangePicker = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleChange = (newStartDate, newEndDate) => {
    setStartDate(newStartDate);
    setEndDate(newEndDate);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateRangeCalendar
        startDate={startDate}
        endDate={endDate}
        onChange={handleChange}
        disablePast // 禁用过去的日期
        renderInput={({ inputProps }) => (
          <TextField {...inputProps} variant="outlined" label="选择日期范围" />
        )}
      />
      <Button
        variant="contained"
        onClick={() => alert(`选择的日期范围: ${startDate} 到 ${endDate}`)}
      >
        提交
      </Button>
    </LocalizationProvider>
  );
};

export default MyNoPastDateRangePicker;

5.3 自定义日期禁用逻辑

您可以通过 isDateDisabled 方法禁用特定的日期。例如，我们可以禁用周末的选择。

const MyWeekendDisabledDateRangePicker = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleChange = (newStartDate, newEndDate) => {
    setStartDate(newStartDate);
    setEndDate(newEndDate);
  };

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

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateRangeCalendar
        startDate={startDate}
        endDate={endDate}
        onChange={handleChange}
        isDateDisabled={isDateDisabled}
        renderInput={({ inputProps }) => (
          <TextField {...inputProps} variant="outlined" label="选择日期范围" />
        )}
      />
      <Button
        variant="contained"
        onClick={() => alert(`选择的日期范围: ${startDate} 到 ${endDate}`)}
      >
        提交
      </Button>
    </LocalizationProvider>
  );
};

export default MyWeekendDisabledDateRangePicker;