如何在MUI DatePicker中实现mm/yyyy格式的日期自动格式化？

问题描述 #

我在使用MUI DatePicker的MM/YYYY格式时，希望实现和dd/MM/YYYY格式一样的用户输入自动添加斜杠功能，但调试后始终无法实现。手动输入月份和年份后，得到的是032021而非预期的03/2021，而带日期的格式输入时会自动添加分隔符。

测试代码如下：

import * as React from "react";
import dayjs, { Dayjs } from "dayjs";
import TextField from "@mui/material/TextField";
import Stack from "@mui/material/Stack";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";

export default function ViewsDatePicker() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs("2022-04-07"));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={3}>
        <DatePicker
          views={["year", "month"]}
          inputFormat="MM/YYYY" //Added prop
          label="Year and Month"
          minDate={dayjs("2012-03-01")}
          maxDate={dayjs("2023-06-01")}
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          renderInput={(params) => <TextField {...params} helperText={null} />}
        />
        <DatePicker
          openTo="year"
          views={["year", "month", "day"]}
          label="Year, month and date"
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          renderInput={(params) => <TextField {...params} helperText={null} />}
        />
      </Stack>
    </LocalizationProvider>
  );
}

解决方案 #

要实现MM/YYYY格式的自动添加斜杠，核心是配置输入掩码（Input Mask），以下两种方案可实现需求：

方案一：使用react-input-mask集成第三方掩码 #

1. 安装依赖：

npm install react-input-mask --save
# 或
yarn add react-input-mask

2. 修改代码，在renderInput中为TextField添加掩码包装：

import InputMask from "react-input-mask";

// 其他导入代码不变

export default function ViewsDatePicker() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs("2022-04-07"));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={3}>
        <DatePicker
          views={["year", "month"]}
          inputFormat="MM/YYYY"
          label="Year and Month"
          minDate={dayjs("2012-03-01")}
          maxDate={dayjs("2023-06-01")}
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          renderInput={(params) => (
            <InputMask
              mask="99/9999"
              maskChar=""
              value={params.inputProps.value}
              onChange={params.inputProps.onChange}
            >
              {(inputProps) => <TextField {...params} inputProps={inputProps} helperText={null} />}
            </InputMask>
          )}
        />
        {/* 第二个DatePicker保持原有代码不变 */}
        <DatePicker
          openTo="year"
          views={["year", "month", "day"]}
          label="Year, month and date"
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          renderInput={(params) => <TextField {...params} helperText={null} />}
        />
      </Stack>
    </LocalizationProvider>
  );
}

方案二：使用MUI X内置掩码功能（适用于MUI X v5.0+） #

如果使用的是较新版本的MUI X，可直接通过mask属性配置，无需额外依赖：

// 其他导入代码不变

export default function ViewsDatePicker() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs("2022-04-07"));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={3}>
        <DatePicker
          views={["year", "month"]}
          inputFormat="MM/YYYY"
          mask="__/____" // 下划线代表可输入字符，自动匹配输入格式插入斜杠
          label="Year and Month"
          minDate={dayjs("2012-03-01")}
          maxDate={dayjs("2023-06-01")}
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          renderInput={(params) => <TextField {...params} helperText={null} />}
        />
        {/* 第二个DatePicker保持原有代码不变 */}
        <DatePicker
          openTo="year"
          views={["year", "month", "day"]}
          label="Year, month and date"
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          renderInput={(params) => <TextField {...params} helperText={null} />}
        />
      </Stack>
    </LocalizationProvider>
  );
}

关键说明 #

• 两种方案均可实现输入时自动插入斜杠：用户输入两位月份后，自动添加/，接着输入四位年份。
• 需确保inputFormat与掩码格式对应，保证日期解析和显示逻辑一致。
• MUI X内置掩码功能仅支持较新版本，旧版本建议使用第三方掩码库。

内容的提问来源于stack exchange，提问作者S.Marx