如何将MUI X Data Grid筛选器菜单日期选择器设为美式格式

你遇到的问题根源在于：Data Grid的localeText仅管控表格主体的日期显示逻辑，筛选器菜单里的日期选择器是独立的MUI DatePicker组件，需要单独配置其本地化规则。

具体解决步骤： #

1. 同时导入Data Grid和DatePicker的美式本地化配置
2. 通过Data Grid的componentsProps属性，为筛选器内的日期选择器注入格式配置
3. 保留原有的Data Grid localeText配置，维持表格主体的美式日期显示

示例代码： #

import { enUS as enUSGrid } from '@mui/x-data-grid';
import { enUS as enUSDatePicker } from '@mui/x-date-pickers';

// 配置Data Grid组件
<DataGrid
  localeText={enUSGrid.components.MuiDataGrid.defaultProps.localeText}
  componentsProps={{
    filterPanel: {
      datePickerProps: {
        localeText: enUSDatePicker.components.MuiDatePicker.defaultProps.localeText,
        format: 'MM/dd/yyyy' // 强制指定美式日期格式
      }
    }
  }}
  // 其他表格属性...
/>

注意事项： #

• 若使用MUI X旧版本，需将componentsProps.filterPanel.datePickerProps替换为componentsProps.filterDatePicker
• 显式设置format属性可确保日期选择器的显示、输入严格遵循mm/dd/yyyy格式

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