本教程将指导您如何在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( null ); // handleClick 函数在按钮被点击时调用，设置 Popover 的锚点为当前点击的按钮 const handleClick = (event: React.MouseEvent) => { 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 ( {/* LocalizationProvider 用于提供日期本地化和日期适配器 */} {/* StaticDatePicker 仅显示日历部分 */} {/* 可以设置默认值 */} );}
代码解析
状态管理:
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组件的模块化和灵活性，使得开发者能够构建高度定制化的用户体验。
以上就是MUI X Date Picker：实现无文本框的弹出式日期选择器的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530565.html
微信扫一扫 
支付宝扫一扫 
