在 Material-UI 日期选择器组件中，DateRangePickerToolbar 是一个非常重要的 API，它允许开发者自定义日期范围选择器中的工具栏部分。DateRangePickerToolbar 提供了高度的定制化功能，帮助开发者控制日期选择器中日期范围选择的样式和行为，并提供了更丰富的用户交互。

在本篇博客中，我们将详细探讨 DateRangePickerToolbar 的使用方法，介绍它的所有属性、方法和事件，同时结合其他组件展示其具体应用，帮助你掌握如何使用 DateRangePickerToolbar 创建灵活且功能强大的日期范围选择器。

1. 什么是 DateRangePickerToolbar？

DateRangePickerToolbar 是 Material UI DateRangePicker 组件的一部分，用于控制日期范围选择器中工具栏的渲染。它主要用于自定义选择器顶部的操作部分，例如设置开始和结束日期的快捷按钮、日期格式切换、清除按钮、日期范围选择等。

DateRangePickerToolbar 主要功能：

• 自定义工具栏的外观和行为
• 处理日期范围选择器的清除、确认、取消操作
• 显示自定义的日期范围选择选项

通过 DateRangePickerToolbar，你可以实现更加灵活且符合业务需求的日期范围选择功能。

2. 安装所需的 Material-UI 库

首先，确保你已经安装了 Material-UI 和相关的日期选择器库。

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

3. DateRangePickerToolbar API 概述

3.1 主要属性

DateRangePickerToolbar 提供了一些非常实用的属性，用于自定义工具栏的内容、操作按钮以及用户交互。

• startText：起始日期文本。
• endText：结束日期文本。
• clearLabel：清除按钮的文本。
• applyLabel：应用按钮的文本。
• cancelLabel：取消按钮的文本。
• onApply：点击应用按钮时的回调函数，接收当前选择的日期范围。
• onCancel：点击取消按钮时的回调函数。
• onClear：点击清除按钮时的回调函数，用于清空日期范围。

3.2 事件和方法

• onApply：当用户确认选择日期范围时触发的事件。常用于更新日期范围或提交操作。
• onCancel：当用户点击取消时触发的事件，通常用于关闭选择器或恢复到之前的状态。
• onClear：当用户点击清除按钮时触发的事件，用于清空选定的日期范围。

3.3 使用方法

在实际使用中，我们会通过 DateRangePicker 组件的 renderToolbar 属性来自定义工具栏内容，下面将给出一些实际的代码示例。

4. DateRangePickerToolbar 基本示例

4.1 导入所需的组件

首先，确保你已经导入了 Material-UI 和日期选择器相关的组件。

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

4.2 创建基本的 DateRangePickerToolbar 示例

我们将创建一个简单的日期范围选择器，并通过 DateRangePickerToolbar 来定制工具栏的内容。

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

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

  const handleApply = (range) => {
    setDateRange(range);
    alert(`日期范围已选择: ${range[0]} 到 ${range[1]}`);
  };

  const handleCancel = () => {
    setDateRange([null, null]);
    alert("已取消日期选择");
  };

  const handleClear = () => {
    setDateRange([null, null]);
    alert("已清除日期选择");
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateRangePicker
        startText="开始日期"
        endText="结束日期"
        value={dateRange}
        onChange={handleChange}
        renderToolbar={(props) => (
          <DateRangePickerToolbar
            {...props}
            startText="选择开始日期"
            endText="选择结束日期"
            clearLabel="清除"
            applyLabel="应用"
            cancelLabel="取消"
            onApply={handleApply}
            onCancel={handleCancel}
            onClear={handleClear}
          />
        )}
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} variant="outlined" />
            <TextField {...endProps} variant="outlined" />
          </>
        )}
      />
      <Button
        variant="contained"
        onClick={() => alert(`选择的日期范围: ${dateRange[0]} 到 ${dateRange[1]}`)}
      >
        提交
      </Button>
    </LocalizationProvider>
  );
};

export default MyCustomDateRangePicker;

4.3 解释

1. 自定义工具栏：

   • 使用 renderToolbar 属性自定义工具栏内容，并传递 startText、endText、clearLabel、applyLabel 和 cancelLabel 属性。
   • 通过 onApply、onCancel 和 onClear 事件处理用户的操作。

2. 日期范围选择：

   • DateRangePicker 组件的 value 属性用于控制选中的日期范围，onChange 用于更新日期范围。
   • renderToolbar 允许开发者完全控制工具栏的外观和行为。

3. 日期范围显示：

   • 当用户点击“应用”按钮时，触发 handleApply 函数，更新日期范围。
   • 用户点击“取消”时，会清空日期范围，触发 handleCancel。
   • 用户点击“清除”按钮时，清除选中的日期。

5. DateRangePickerToolbar 高级使用

5.1 自定义按钮样式

你可以通过 DateRangePickerToolbar 的 actions 属性来添加自定义按钮或操作。以下是一个包含额外操作按钮的示例。

import { IconButton } from '@mui/material';
import { Refresh } from '@mui/icons-material';

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

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

  const handleRefresh = () => {
    alert("刷新日期选择器");
  };

  const handleApply = (range) => {
    setDateRange(range);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateRangePicker
        startText="开始日期"
        endText="结束日期"
        value={dateRange}
        onChange={handleChange}
        renderToolbar={(props) => (
          <DateRangePickerToolbar
            {...props}
            startText="选择开始日期"
            endText="选择结束日期"
            clearLabel="清除"
            applyLabel="应用"
            cancelLabel="取消"
            onApply={handleApply}
            onCancel={() => setDateRange([null, null])}
            onClear={() => setDateRange([null, null])}
            actions={[
              <IconButton key="refresh" onClick={handleRefresh}>
                <Refresh />
              </IconButton>
            ]}
          />
        )}
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} variant="outlined" />
            <TextField {...endProps} variant="outlined" />
          </>
        )}
      />
    </LocalizationProvider>
  );
};

export default MyCustomDateRangePickerWithActions;

在这个示例中，我们添加了一个“刷新”按钮，当用户点击时，触发 handleRefresh 事件，更新日期选择器的状态。

5.2 集成其他组件

你可以将 DateRangePickerToolbar 与其他组件（如搜索框、过滤器、图表等）结合使用，来增强日期选择器的功能。以下是一个集成搜索框和日期范围选择器的示例：

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

const MyDateRangeWithSearch = () => {
  const [dateRange, setDateRange] = useState([null, null]);
  const [searchQuery, setSearchQuery] = useState("");

  const handleSearchChange = (event) => {
    setSearchQuery(event.target.value);
  };

  const handleChange = (newValue

) => {
    setDateRange(newValue);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateRangePicker
        startText="开始日期"
        endText="结束日期"
        value={dateRange}
        onChange={handleChange}
        renderToolbar={(props) => (
          <DateRangePickerToolbar
            {...props}
            startText="选择开始日期"
            endText="选择结束日期"
            clearLabel="清除"
            applyLabel="应用"
            cancelLabel="取消"
            onApply={(range) => setDateRange(range)}
            onCancel={() => setDateRange([null, null])}
            onClear={() => setDateRange([null, null])}
          />
        )}
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} variant="outlined" />
            <TextField {...endProps} variant="outlined" />
          </>
        )}
      />
      <TextField
        label="搜索"
        variant="outlined"
        value={searchQuery}
        onChange={handleSearchChange}
        fullWidth
      />
    </LocalizationProvider>
  );
};

export default MyDateRangeWithSearch;

在这个示例中，我们将 DateRangePicker 与搜索框结合在一起，用户可以在选择日期范围的同时输入搜索内容。

6. 总结

本文详细介绍了如何使用 Material UI 的 DateRangePickerToolbar API 来实现一个自定义的日期范围选择器工具栏。通过这个 API，开发者可以灵活地自定义日期范围选择器的外观和功能，处理用户的交互并与其他组件结合使用，创建功能丰富且符合业务需求的日期选择器。希望这篇文章能够帮助你更好地理解和使用 DateRangePickerToolbar，提高你的开发效率和用户体验。

如果你有任何问题或想要查看更多示例，欢迎在评论区留言！