在桌面 MUI 5 DatePicker 中打开对话框而不是 Popper答案

【问题标题】：Open Dialog instead of Popper in desktop MUI 5 DatePicker在桌面 MUI 5 DatePicker 中打开对话框而不是 Popper
【发布时间】：2021-12-03 15:44:15
【问题描述】：

我希望 MUI v5 DatePicker (@mui/lab 5.0.0-alpha-51) 的行为类似于 DesktopDatePicker（允许直接编辑文本框中的日期）。但是当点击日历图标时，我想打开选择器对话框，就像点击MobileDatePicker时一样。

我尝试使用MobileDatePicker 并将endAdornment 添加到InputProps 以获取要绘制的日历图标。但这不起作用。

也许说得更清楚一点：我希望DesktopDatePicker在用户点击日历图标时打开MobileDatePicker的Dialog。

有没有办法实现这种混合行为？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

如果您查看MobileWrapper 和DesktopWrapper 定义，您会发现它们使用不同的组件来显示选择器（前者使用模态，后者使用弹出框）并且无法交换它使用picker组件提供的props，但你也知道内部modal来自哪里，所以你可以抓取它：

import PickersModalDialog from "@mui/lab/internal/pickers/PickersModalDialog";

在这个section 中，您可以看到MUI 公开了StaticDatePicker，它使用了桌面和移动选择器都使用的内部Picker 组件，如果您想构建自己的自定义弹出窗口/模式，这个正是你想要的，所以也抓住这个：

import StaticDatePicker from '@mui/lab/StaticDatePicker';

下一步是集成并使它们一起工作，我们有DesktopDatePicker，因为您想编辑TextField，PickersModalDialog 以在模式中显示StaticDatePicker。为此，您需要执行以下操作：

(1) 禁用 DesktopDatePicker 的弹出框选择器，否则我们将同时显示 2 个选择器。
(2) 控制DesktopDatePicker 日期值。当用户编辑TextField 时，DesktopDatePicker 请求更改值。
(3) 控制StaticDatePicker 日期值。当用户在模式中选择日期时，StaticDatePicker 请求更改值。
(4) 通过覆盖以下步骤中的道具来控制PickersModalDialog 的打开状态。
(5) 在PickersModalDialog 中添加所需的道具：
- onAccept：当用户点击OK按钮时。
- onClear：当用户点击CANCEL按钮时。
- onSetToday：当用户点击TODAY按钮时。仅在MobileDatePicker中可用，如果要显示，请在PickersModalDialog中设置showTodayButton。
- onDismiss：当对话框想要自行关闭时（例如当用户在模态框外点击时）

将它们放在一起，我们将得到如下所示：

const [value, setValue] = React.useState<Date | null>(() => new Date()); // (2)
const [tempValue, setTempValue] = React.useState<Date | null>(null); // (3)
const [open, setOpen] = React.useState(false); // (4)

return (
  <>
    <DesktopDatePicker
      label="For desktop"
      value={value}
      open={false} // (1)
      onChange={(newValue) => setValue(newValue)}
      onOpen={() => {
        setTempValue(value);
        setOpen(true);
      }}
      renderInput={(params) => <TextField {...params} />}
    />
    <PickersModalDialog
      showTodayButton
      open={open}
      // (5)
      onAccept={() => {
        setValue(tempValue);
        setOpen(false);
      }}
      onSetToday={() => {
        setValue(new Date());
        setOpen(false);
      }}
      onDismiss={() => setOpen(false)}
      onClear={() => setOpen(false)}
    >
      <StaticDatePicker
        displayStaticWrapperAs="mobile"
        value={tempValue}
        onChange={(newValue) => setTempValue(newValue)}
        renderInput={(params) => <TextField {...params} />}
      />
    </PickersModalDialog>
  </>
);

现场演示

【讨论】：