在React MUI X中实现无文本框的日期选择器弹窗

本文详细介绍了如何在react mui x中，通过结合staticdatepicker和popover组件，实现一个无文本输入框、由按钮触发的日期选择器。这种方法允许用户点击按钮后直接弹出日历进行日期选择，避免了传统日期选择器中自带文本输入框的显示，适用于需要更简洁或定制化用户界面的场景。

在构建现代Web应用时，日期选择器是一个常用组件。然而，有时我们希望日期选择器以弹窗形式出现，且不附带默认的文本输入框，仅通过一个按钮触发并直接展示日历界面供用户选择。MUI X的DatePicker系列组件默认包含一个文本输入框，这不符合上述特定需求。为了实现这一目标，我们可以巧妙地结合StaticDatePicker和MUI的Popover组件。

核心思路

StaticDatePicker是MUI X提供的一个独立日期选择器组件，它本身不包含任何输入框，只渲染日历界面。而Popover组件则提供了一种将内容以浮层形式展示在指定锚点（如按钮）旁边的能力。将StaticDatePicker放置在Popover内部，并由一个按钮控制Popover的打开与关闭，即可实现无文本框的日期选择弹窗。

实现步骤

以下是实现无文本框日期选择器弹窗的具体步骤和示例代码：

1. 导入所需组件和工具 首先，确保你已经安装了@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'; // 用于设置默认值或处理日期对象

   登录后复制

2. 管理弹窗状态 使用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

   登录后复制

3. 渲染按钮和弹窗 在组件的return语句中，渲染一个Button作为触发器，并渲染Popover组件。

   • Button组件：

     

     微软文字转语音

     微软文本转语音，支持选择多种语音风格，可调节语速。

     0

     查看详情
     • 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>
  );
}

注意事项与扩展

1. 获取选中的日期：在上述示例中，StaticDatePicker的onChange属性用于捕获用户选择的日期。handleDateChange函数接收一个dayjs对象，你可以将其存储在组件状态中，或执行其他逻辑。为了更好的用户体验，通常会在日期选择后自动关闭Popover。
2. 定位与样式：Popover的anchorOrigin和transformOrigin属性允许你精细控制弹窗相对于锚点元素的位置。根据UI设计调整这些值以获得最佳视觉效果。
3. 可访问性：aria-describedby属性对于屏幕阅读器用户非常重要，它将按钮与弹窗内容关联起来。
4. 国际化：LocalizationProvider不仅用于指定日期适配器，还可以通过localeText属性配置日期选择器的文本（如月份名称、星期几等）以支持多语言。
5. 禁用日期：StaticDatePicker支持disablePast、disableFuture、shouldDisableDate等属性，可以用来限制用户选择的日期范围。
6. 响应式设计：StaticDatePicker默认是响应式的，但在Popover中，其尺寸通常会保持固定。如果需要更复杂的响应式行为，可能需要结合媒体查询或更高级的布局技巧。

总结

通过将MUI X的StaticDatePicker嵌入到Popover组件中，我们成功地创建了一个无文本输入框、由按钮触发的日期选择弹窗。这种方法不仅提供了高度定制化的用户界面，还保持了MUI组件的专业性和可访问性。开发者可以根据具体需求，进一步配置StaticDatePicker和Popover的属性，以满足各种复杂的日期选择场景。

以上就是在React MUI X中实现无文本框的日期选择器弹窗的详细内容，更多请关注php中文网其它相关文章！