如何修改type为date的MUI TextField组件的日期格式？

直接使用type="date"的MUI TextField无法自定义日期格式——因为它封装的是原生HTML <input type="date">，其显示格式由用户的系统区域设置决定，而非组件属性控制。要实现DD/MM/YYYY的自定义格式，推荐使用MUI X DatePicker组件，具体步骤如下：

1. 安装依赖 #

首先确保安装MUI X日期组件及轻量适配库Day.js：

npm install @mui/x-date-pickers dayjs @mui/material @emotion/react @emotion/styled

2. 配置日期本地化 #

导入Day.js的英式英语locale（对应DD/MM/YYYY格式），并通过LocalizationProvider配置适配器：

import React from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import TextField from '@mui/material/TextField';
import dayjs from 'dayjs';
import 'dayjs/locale/en-gb';

// 设置全局locale为英式英语，适配DD/MM/YYYY格式
dayjs.locale('en-gb');

3. 实现自定义格式的日期选择器 #

使用DatePicker结合MUI TextField，即可得到符合需求的日期输入组件：

export default function DDMMYYYYDatePicker() {
  const [selectedDate, setSelectedDate] = React.useState(dayjs());

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="选择日期"
        value={selectedDate}
        onChange={(newDate) => setSelectedDate(newDate)}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

注意事项 #

• 不推荐通过CSS hack修改原生type="date"的TextField显示格式：这种方法会破坏原生日历的交互逻辑，且存在浏览器兼容性问题。
• 若需要其他地区格式，只需替换对应的Day.js locale（比如fr对应法语区格式）即可。

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