如何在MUI X Data Grid的x-date-picker中设置无前置零的m/d/yyyy格式？

你之前用的format="m/d/yyyy"里，小写的m在dayjs语法里代表分钟，不是月份，这才是格式不生效的核心原因。要实现月份和日期无前置零的「月/日/年」格式，可按以下方式操作：

• 直接给DatePicker配置正确的格式字符串：format="M/d/yyyy"
  • 大写M对应1-12的月份（无前置零）
  • 小写d对应1-31的日期（无前置零）
  • yyyy对应4位年份

如果需要全局统一该格式，也可以通过自定义本地化配置实现，示例代码如下：

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 dayjs from 'dayjs';

// 自定义本地化规则
const customLocale = {
  ...AdapterDayjs.locale,
  formatLong: {
    date: () => 'M/d/yyyy',
  },
};

export default function CustomFormatDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={customLocale}>
      <DatePicker label="选择日期" />
    </LocalizationProvider>
  );
}

内容的提问来源于stack exchange，提问作者Claudio Cavalcante Tonha