DateTimePickerToolbar 是 Material UI 日期与时间选择器（Date and Time Pickers）中的一个关键组件，专用于提供顶部工具栏，显示当前选定的日期和时间信息，并允许用户快速切换视图。

在本文中，我们将详细说明 DateTimePickerToolbar 的用途、属性、方法，以及如何与其他组件配合使用。同时，提供多个代码示例，涵盖 DateTimePickerToolbar 的定制化和完整功能。

1. 什么是 DateTimePickerToolbar

DateTimePickerToolbar 是 DateTimePicker 的默认顶部工具栏组件。它的主要作用是：

• 显示用户当前选择的日期或时间。
• 提供快速切换日期和时间视图的功能。
• 提供顶部标题栏样式，支持高度定制化。

2. 安装和基础设置

在使用 DateTimePickerToolbar 之前，确保已经安装了以下依赖包：

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

然后引入和配置日期时间选择器的适配器，例如 AdapterDateFns：

import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';

3. DateTimePickerToolbar 的主要 API

以下是 DateTimePickerToolbar 的属性及其说明：

4. 使用示例

示例 1：基本使用

以下是一个最基础的 DateTimePicker 集成了默认的 DateTimePickerToolbar 的例子：

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

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

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateTimePicker
        value={value}
        onChange={(newValue) => setValue(newValue)}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

export default BasicDateTimePicker;

在此示例中，DateTimePickerToolbar 作为默认的工具栏组件自动被集成。

示例 2：自定义工具栏标题

可以通过 toolbarTitle 属性自定义工具栏的标题。例如：

<DateTimePicker
  toolbarTitle="选择日期和时间"
/>

示例 3：自定义视图切换行为

通过 onViewChange 和 view 属性，你可以控制视图的切换。例如：

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

const ControlledViewDateTimePicker = () => {
  const [value, setValue] = useState(new Date());
  const [view, setView] = useState('date');

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateTimePicker
        value={value}
        onChange={(newValue) => setValue(newValue)}
        view={view}
        onViewChange={(newView) => setView(newView)}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

export default ControlledViewDateTimePicker;

此代码确保视图状态由外部受控，并且可以在需要时手动切换视图。

示例 4：自定义工具栏外观

通过 components 和 componentsProps 属性，可以完全自定义 DateTimePickerToolbar 的外观和行为。例如：

import React from 'react';
import { DateTimePicker } from '@mui/x-date-pickers';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';

const CustomToolbar = (props) => {
  return (
    <div style={{ padding: '10px', backgroundColor: '#1976d2', color: '#fff' }}>
      <Typography variant="h6">
        {props.toolbarTitle || 'Custom Toolbar Title'}
      </Typography>
    </div>
  );
};

const CustomToolbarDateTimePicker = () => {
  const [value, setValue] = React.useState(new Date());

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateTimePicker
        value={value}
        onChange={(newValue) => setValue(newValue)}
        components={{
          Toolbar: CustomToolbar,
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

export default CustomToolbarDateTimePicker;

效果：

1. 工具栏背景变为蓝色。
2. 标题为自定义内容。

示例 5：结合表单的综合应用

以下展示了如何将 DateTimePicker（带自定义 DateTimePickerToolbar）与表单控件集成：

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

const FormWithDateTimePicker = () => {
  const [dateTime, setDateTime] = useState(new Date());

  const handleSubmit = () => {
    alert(`Selected DateTime: ${dateTime}`);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateTimePicker
        value={dateTime}
        onChange={(newValue) => setDateTime(newValue)}
        toolbarTitle="选择时间"
        renderInput={(params) => <TextField {...params} />}
      />
      <Button
        variant="contained"
        color="primary"
        style={{ marginTop: '20px' }}
        onClick={handleSubmit}
      >
        提交
      </Button>
    </LocalizationProvider>
  );
};

export default FormWithDateTimePicker;

5. 注意事项

• 布局调整：在较小屏幕上使用 isLandscape 属性切换横向布局。
• 视图管理：确保 view 和 onViewChange 的状态同步，避免出现 UI 异常。
• 工具栏定制：通过 components 属性，可以实现高度定制化的工具栏设计。

6. 总结

DateTimePickerToolbar 是 Material UI 中不可或缺的组件，为用户提供直观的日期和时间切换工具。通过本文，你了解了其核心属性、定制方法和与其他组件的结合方式。通过上述丰富的代码示例，你可以灵活应用 DateTimePickerToolbar，为项目带来更好的用户体验。

希望本文能帮助你更好地掌握和使用 Material UI 的 DateTimePickerToolbar API！