本教程将指导您如何在react mui x中创建一个不显示文本输入框的弹出式日期选择器。通过结合使用`staticdatepicker`来仅展示日历界面，并利用`popover`组件实现点击按钮后弹出日历的交互行为，从而满足仅需选择日期而无需输入字段的特定ui需求。
在React应用开发中，尤其是在使用Material-UI (MUI) 库时，我们经常需要集成日期选择器。MUI X Date Picker提供了多种强大的日期选择组件。然而，在某些特定的用户界面设计中，我们可能不希望日期选择器附带一个文本输入框，而是希望它在点击一个按钮或其他元素时以模态（modal）或弹出（popover）的形式出现，并且只显示日历部分供用户选择日期。标准的DatePicker组件通常会包含一个输入字段，这与我们的需求不符。
为了实现这种无文本框的弹出式日期选择器，我们可以巧妙地结合使用MUI X的StaticDatePicker和MUI Core的Popover组件。StaticDatePicker的特点是它只渲染日期选择的日历部分，而不会包含任何输入字段。Popover则提供了一个灵活的弹出层，可以锚定到任何DOM元素，非常适合实现点击触发的弹出效果。
核心组件介绍
-
StaticDatePicker:
- 来自 @mui/x-date-pickers。
- 其主要作用是渲染一个独立的、静态的日期选择日历。它不与任何输入框关联，也不提供内置的弹出/关闭机制。
- 非常适合嵌入到自定义容器中，或者像本例一样，嵌入到Popover中。
-
Popover:
- 来自 @mui/material。
- 一个用于显示临时内容的浮动面板，通常锚定到某个用户界面元素。
- 它提供了控制打开/关闭状态、锚定位置以及关闭行为（如点击外部区域关闭）的强大功能。
实现步骤与示例代码
我们将创建一个React组件，该组件包含一个按钮。当点击这个按钮时，一个Popover会弹出，其中包含一个StaticDatePicker。
首先，请确保您已经安装了必要的MUI X和MUI Core依赖：
npm install @mui/material @emotion/react @emotion/styled @mui/x-date-pickers dayjs # 或者 yarn add @mui/material @emotion/react @emotion/styled @mui/x-date-pickers dayjs
接下来，创建一个名为 DatePickerPopOver.tsx (或 .jsx) 的组件文件，并按如下方式实现：
import * as React from 'react';
import Button from '@mui/material/Button';
import Popover from '@mui/material/Popover';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import dayjs from 'dayjs';
export default function DatePickerPopOver() {
// anchorEl 状态用于控制 Popover 的锚点元素，即 Popover 将从哪个元素弹出
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
null
);
// handleClick 函数在按钮被点击时调用，设置 Popover 的锚点为当前点击的按钮
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
// handleClose 函数在 Popover 关闭时调用，将 anchorEl 设置为 null
const handleClose = () => {
setAnchorEl(null);
};
// open 变量通过检查 anchorEl 是否为 null 来确定 Popover 是否应该打开
const open = Boolean(anchorEl);
// id 用于辅助无障碍访问，确保 Popover 与触发它的元素关联
const id = open ? "date-picker-popover" : undefined;
return (
<div>
<Button aria-describedby={id} variant="contained" onClick={handleClick}>
选择日期
</Button>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom", // Popover 垂直方向从锚点底部开始
horizontal: "left" // Popover 水平方向从锚点左侧开始
}}
transformOrigin={{
vertical: 'top', // Popover 自身垂直方向的起始点为顶部
horizontal: 'left', // Popover 自身水平方向的起始点为左侧
}}
>
{/* LocalizationProvider 用于提供日期本地化和日期适配器 */}
<LocalizationProvider dateAdapter={AdapterDayjs}>
{/* StaticDatePicker 仅显示日历部分 */}
<StaticDatePicker defaultValue={dayjs()} /> {/* 可以设置默认值 */}
</LocalizationProvider>
</Popover>
</div>
);
}代码解析
-
状态管理:
- anchorEl: 使用 useState 管理 Popover 的锚点元素。当 anchorEl 为 null 时，Popover 关闭；当它被设置为一个DOM元素（通常是触发按钮）时，Popover 打开并锚定在该元素上。
- open: 一个布尔值，根据 anchorEl 的状态计算得出，用于 Popover 的 open prop。
-
事件处理:
- handleClick: 当用户点击“选择日期”按钮时，此函数将按钮的DOM元素 (event.currentTarget) 设置为 anchorEl，从而打开 Popover。
- handleClose: 当用户点击 Popover 外部区域或按下 Esc 键时，Popover 会触发 onClose 事件，此函数将 anchorEl 设置回 null，从而关闭 Popover。
-
Button 组件:
- aria-describedby={id}: 提供了无障碍访问性，将按钮与弹出的 Popover 关联起来。
- onClick={handleClick}: 绑定点击事件，用于打开 Popover。
-
Popover 组件:
- id={id}: 同样用于无障碍访问。
- open={open}: 控制 Popover 的可见性。
- anchorEl={anchorEl}: 指定 Popover 应该锚定到哪个元素。
- onClose={handleClose}: 当 Popover 应该关闭时调用的回调函数。
- anchorOrigin 和 transformOrigin: 这些属性用于精确控制 Popover 相对于其锚点元素的出现位置。在示例中，anchorOrigin 设置 Popover 从锚点底部左侧开始，transformOrigin 设置 Popover 自身内容从顶部左侧开始，这通常会使 Popover 出现在按钮的正下方。
-
LocalizationProvider 和 StaticDatePicker:
- LocalizationProvider: 这是MUI X日期选择器组件的必需包装器。它需要一个 dateAdapter prop，这里我们使用了 AdapterDayjs 来处理日期对象。
- StaticDatePicker: 这是核心的日期选择器组件，它只显示日历界面。defaultValue 可以设置日历的初始显示日期。
注意事项与总结
- 日期适配器: 务必引入并配置 LocalizationProvider 和一个日期适配器（如 AdapterDayjs、AdapterMoment 或 AdapterDateFns）。
- 默认值: StaticDatePicker 可以通过 defaultValue 或 value prop 设置初始显示的日期或选中的日期。
- 状态管理: 如果您需要获取用户选择的日期，可以在 StaticDatePicker 上添加 onChange prop，并将其值存储在组件的另一个状态中。
- 样式定制: Popover 和 StaticDatePicker 都提供了丰富的API和CSS类，允许您根据项目需求进行样式定制。
- 替代方案: 虽然本教程侧重于 Popover，但对于更复杂的模态交互，您也可以考虑使用 Dialog 组件来包裹 StaticDatePicker，以获得更强的焦点管理和模态行为。
通过上述方法，我们成功地创建了一个无文本框的弹出式日期选择器，它在点击按钮时显示一个纯粹的日历界面，完美地满足了特定UI场景的需求。这种组合利用了MUI组件的模块化和灵活性，使得开发者能够构建高度定制化的用户体验。
