MUI X DatePicker v6中disableMaskedInput属性的替代方案是什么？

MUI X DatePicker从v5升级到v6后，原disableMaskedInput属性被移除，要实现“点击文本框时移除掩码、自由输入日期”的效果，可通过以下方案替代：

核心替代方案 #

v6中日期输入的掩码由mask属性控制，默认会根据inputFormat自动生成掩码。要实现v5中disableMaskedInput的效果，直接设置mask={null}即可完全关闭掩码功能，同时配合inputFormat定义日期的显示格式。

修改后的完整代码 #

针对你提供的v6代码，调整后如下：

<LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale={language}>
  <DatePicker
    disablePast
    mask={null} // 替代disableMaskedInput，关闭掩码
    inputFormat="yyyy-MM-dd" // 按需求设置日期格式（比如"MM/dd/yyyy"）
    slots={{
      openPickerIcon: () => <IconCalendar size={20} color={TakeTurnsColors.grayButton} />,
    }}
    value={date}
    onChange={(date: DateTime) => setDate(date)}
    slotProps={{
      textField: {
        sx: {
          // 你的样式配置
        },
        inputProps: {
          placeholder: t("deadlinePlaceholder"),
          inputMode: "text", // 确保输入框以纯文本模式交互
        },
      },
    }}
  />
</LocalizationProvider>

进阶场景：点击才移除掩码 #

如果需要保持默认显示掩码，仅在点击输入框时移除，可通过状态控制mask属性的切换：

import { useState } from 'react';

// ...

const [isInputFocused, setIsInputFocused] = useState(false);

<LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale={language}>
  <DatePicker
    disablePast
    mask={isInputFocused ? null : "__.__.____"} // 焦点时关闭掩码，失焦恢复
    inputFormat="yyyy-MM-dd"
    slots={{
      openPickerIcon: () => <IconCalendar size={20} color={TakeTurnsColors.grayButton} />,
    }}
    value={date}
    onChange={(date: DateTime) => setDate(date)}
    slotProps={{
      textField: {
        sx: {
          // 你的样式配置
        },
        inputProps: {
          placeholder: t("deadlinePlaceholder"),
        },
        onFocus: () => setIsInputFocused(true),
        onBlur: () => setIsInputFocused(false),
      },
    }}
  />
</LocalizationProvider>

内容的提问来源于stack exchange，提问作者Frédéric JAMMES