如何修改React中MUI TextField日期输入的显示格式为dd-mmm-yyyy？

你当前使用的是原生type="date"属性的TextField，该输入框的显示格式完全由浏览器默认规则控制，无法自定义修改为带月份缩写的格式，需要改用MUI官方的X Date Pickers组件实现需求，具体步骤如下：

步骤1：安装必要依赖 #

• 安装MUI日期选择器基础包：

npm install @mui/x-date-pickers

• 安装日期处理适配器（示例用date-fns，也可替换为dayjs等其他库）：

npm install date-fns @mui/x-date-pickers/date-fns-adapter

步骤2：全局配置日期适配器 #

在你的应用根组件（如App.jsx）外层套上本地化Provider，示例代码：

import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      {/* 此处放置原有应用的所有内容 */}
    </LocalizationProvider>
  );
}

步骤3：替换原有日期输入代码 #

将你原来的TextField替换为DatePicker组件，通过format属性指定你需要的日期格式，完整示例代码：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { TextField } from '@mui/material';

// 组件内使用部分
<DatePicker
  name="startDate"
  label="Start Date"
  // 配置显示格式，LLL对应短月份缩写，默认首字母大写，需要全小写可参考下方自定义方法
  format="dd-LLL-yyyy"
  value={values.startDate}
  onChange={(newValue) => handleStartDateChange(newValue)}
  slotProps={{
    textField: {
      required: true,
      InputLabelProps: { 
        shrink: true, 
        style: { fontWeight: 700, color:'#1E1E1E', fontFamily:'Open Sans', fontSize:'18px'} 
      },
      InputProps: { style: {border: "1px solid #C2C2C2", padding: 6, width:480, height:51} }
    }
  }}
/>

可选：月份全小写处理 #

如果需要输出nov而非默认的Nov格式，可替换format属性为自定义格式化函数：

format={(date) => {
  const day = String(date.getDate()).padStart(2, '0');
  const month = date.toLocaleString('en-US', { month: 'short' }).toLowerCase();
  const year = date.getFullYear();
  return `${day}-${month}-${year}`;
}}

注意：DatePicker的onChange默认返回Date类型对象，如果你原有handleStartDateChange是处理字符串类型值，需要自行调整逻辑将Date对象转换为你需要的存储格式。

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