本文详细介绍了如何在react mui x中，通过结合staticdatepicker和popover组件，实现一个无文本输入框、由按钮触发的日期选择器。这种方法允许用户点击按钮后直接弹出日历进行日期选择，避免了传统日期选择器中自带文本输入框的显示，适用于需要更简洁或定制化用户界面的场景。
在构建现代Web应用时，日期选择器是一个常用组件。然而，有时我们希望日期选择器以弹窗形式出现，且不附带默认的文本输入框，仅通过一个按钮触发并直接展示日历界面供用户选择。MUI X的DatePicker系列组件默认包含一个文本输入框，这不符合上述特定需求。为了实现这一目标，我们可以巧妙地结合StaticDatePicker和MUI的Popover组件。
核心思路
StaticDatePicker是MUI X提供的一个独立日期选择器组件，它本身不包含任何输入框，只渲染日历界面。而Popover组件则提供了一种将内容以浮层形式展示在指定锚点（如按钮）旁边的能力。将StaticDatePicker放置在Popover内部，并由一个按钮控制Popover的打开与关闭，即可实现无文本框的日期选择弹窗。
实现步骤
以下是实现无文本框日期选择器弹窗的具体步骤和示例代码：
-
导入所需组件和工具 首先，确保你已经安装了@mui/x-date-pickers、@mui/material和dayjs（作为日期适配器）。然后导入所需的React Hooks、MUI组件以及日期处理库。
import 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'; // 用于设置默认值或处理日期对象 -
管理弹窗状态 使用React的useState Hook来管理Popover的锚点元素（anchorEl）和打开状态（open）。anchorEl将指向触发弹窗的按钮，而open则是一个布尔值，指示弹窗是否可见。
function DatePickerPopOver() { const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null); // 处理按钮点击事件，设置锚点为当前点击的按钮 const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => { setAnchorEl(event.currentTarget); }; // 处理弹窗关闭事件 const handleClose = () => { setAnchorEl(null); }; const open = Boolean(anchorEl); // 根据anchorEl是否存在判断弹窗是否打开 const id = open ? 'date-picker-popover' : undefined; // 为可访问性提供ID -
渲染按钮和弹窗 在组件的return语句中，渲染一个Button作为触发器，并渲染Popover组件。
-
Button组件：
- aria-describedby={id}：提供可访问性支持，将按钮与弹窗关联起来。
- variant="contained"：设置按钮样式。
- onClick={handleClick}：点击时调用handleClick函数打开弹窗。
-
Popover组件：
- id={id}：与按钮的aria-describedby对应。
- open={open}：控制弹窗的可见性。
- anchorEl={anchorEl}：指定弹窗相对于哪个元素定位。
- onClose={handleClose}：当用户点击弹窗外部或按下ESC键时调用，关闭弹窗。
- anchorOrigin：定义弹窗相对于锚点元素的定位点。例如{ vertical: 'bottom', horizontal: 'left' }表示弹窗的左上角将对齐锚点元素的左下角。
-
Popover内部内容：
- LocalizationProvider：MUI X日期选择器必须包裹在LocalizationProvider中，并指定一个日期适配器（如AdapterDayjs）。
- StaticDatePicker：放置在LocalizationProvider内部，作为弹窗的核心内容。你可以设置defaultValue来指定初始显示的日期。
-
完整示例代码
import 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'; // 确保安装并导入 dayjs
export default function DatePickerPopOver() {
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
const [selectedDate, setSelectedDate] = React.useState(dayjs('2022-04-17')); // 示例：管理选中的日期
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
// 处理日期选择变化
const handleDateChange = (newDate) => {
setSelectedDate(newDate);
// 可选：选择日期后自动关闭弹窗
handleClose();
};
const open = Boolean(anchorEl);
const id = open ? 'date-picker-popover' : undefined;
return (
<div>
<Button aria-describedby={id} variant="contained" onClick={handleClick}>
选择日期 ({selectedDate ? selectedDate.format('YYYY-MM-DD') : '未选择'})
</Button>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<StaticDatePicker
defaultValue={dayjs('2022-04-17')} // 初始显示日期
value={selectedDate} // 控制选中的日期
onChange={handleDateChange} // 处理日期变化事件
// 其他StaticDatePicker的props，如orientation="portrait"
/>
</LocalizationProvider>
</Popover>
</div>
);
}注意事项与扩展
- 获取选中的日期：在上述示例中，StaticDatePicker的onChange属性用于捕获用户选择的日期。handleDateChange函数接收一个dayjs对象，你可以将其存储在组件状态中，或执行其他逻辑。为了更好的用户体验，通常会在日期选择后自动关闭Popover。
- 定位与样式：Popover的anchorOrigin和transformOrigin属性允许你精细控制弹窗相对于锚点元素的位置。根据UI设计调整这些值以获得最佳视觉效果。
- 可访问性：aria-describedby属性对于屏幕阅读器用户非常重要，它将按钮与弹窗内容关联起来。
- 国际化：LocalizationProvider不仅用于指定日期适配器，还可以通过localeText属性配置日期选择器的文本（如月份名称、星期几等）以支持多语言。
- 禁用日期：StaticDatePicker支持disablePast、disableFuture、shouldDisableDate等属性，可以用来限制用户选择的日期范围。
- 响应式设计：StaticDatePicker默认是响应式的，但在Popover中，其尺寸通常会保持固定。如果需要更复杂的响应式行为，可能需要结合媒体查询或更高级的布局技巧。
总结
通过将MUI X的StaticDatePicker嵌入到Popover组件中，我们成功地创建了一个无文本输入框、由按钮触发的日期选择弹窗。这种方法不仅提供了高度定制化的用户界面，还保持了MUI组件的专业性和可访问性。开发者可以根据具体需求，进一步配置StaticDatePicker和Popover的属性，以满足各种复杂的日期选择场景。
