如何让桌面端MUI X v5 Date Picker点击日历图标时打开Dialog而非Popper

针对你使用的@mui/lab 5.0.0-alpha.51版本，完全可以实现你要的混合功能，核心思路是拆分「输入框编辑」和「弹窗选择」两个逻辑，分别复用DesktopDatePicker和MobileDatePicker的对应能力，改造成本极低。

核心实现代码 #

import { useState } from 'react';
import { DesktopDatePicker, MobileDatePicker } from '@mui/lab';
import { TextField, Dialog, DialogContent, IconButton } from '@mui/material';
import EventIcon from '@mui/icons-material/Event';

const CustomDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
  const [dialogOpen, setDialogOpen] = useState(false);

  return (
    <>
      {/* 桌面端输入框：保留手动编辑能力，禁用默认弹出逻辑 */}
      <DesktopDatePicker
        label="日期选择"
        value={selectedDate}
        onChange={(newVal) => setSelectedDate(newVal)}
        disableOpenPicker
        InputProps={{
          endAdornment: (
            <IconButton 
              onClick={() => setDialogOpen(true)}
              edge="end"
            >
              <EventIcon />
            </IconButton>
          )
        }}
        renderInput={(params) => <TextField {...params} />}
      />

      {/* 移动端弹窗：点击图标后弹出，仅保留日历选择能力 */}
      <Dialog 
        open={dialogOpen} 
        onClose={() => setDialogOpen(false)}
        maxWidth="xs"
        fullWidth
      >
        <DialogContent>
          <MobileDatePicker
            value={selectedDate}
            onChange={(newVal) => {
              setSelectedDate(newVal);
              setDialogOpen(false);
            }}
            renderInput={() => <></>}
            // 可选配置：隐藏默认顶部工具栏
            // showToolbar={false}
          />
        </DialogContent>
      </Dialog>
    </>
  );
};

方案说明 #

• 输入框部分完全复用DesktopDatePicker的能力，支持手动输入、日期格式校验、输入内容实时解析
• 点击日历图标触发的是独立的Dialog弹窗，内部嵌入MobileDatePicker的选择视图，完全符合你要的交互效果
• 两个组件绑定同一个日期状态，无需额外做状态同步兼容

版本适配注意事项 #

如果你使用的alpha-51版本不识别disableOpenPicker属性，直接替换为open={false}即可强制关闭DesktopDatePicker默认的Popper弹出逻辑。

内容的提问来源于stack exchange，提问作者LaniusExcubitor