如何修改Material-UI Mobile DateTime Picker的AM/PM标签及弹窗内AM/PM选项、OK、Cancel按钮文本

嘿，我来帮你搞定这个问题！要修改Mobile DateTime Picker里的AM/PM标签、弹窗选项以及OK/Cancel按钮文本，其实分两部分处理就很清晰：

一、修改AM/PM相关文本（标签+弹窗选项） #

这部分得靠自定义本地化配置实现，因为AM/PM属于日期时间格式的核心部分，需要借助LocalizationProvider和对应的日期适配器（比如AdapterDateFns）来覆盖默认的本地化文本。

举个实际例子，如果你想把AM改成「上午」、PM改成「下午」，可以这么操作：

1. 先确保安装好所需依赖：

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

2. 创建自定义本地化配置，专门覆盖上下午的文本逻辑：

import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
import TextField from '@mui/material/TextField';
import { enUS } from 'date-fns/locale';

// 自定义本地化规则，替换AM/PM文本
const customLocale = {
  ...enUS,
  formatLong: {
    ...enUS.formatLong,
    // 确保时间格式包含代表上下午的标识（a）
    time: () => 'h:mm a',
  },
  meridiem: (hours, minutes, isLowercase) => {
    if (hours < 12) {
      return isLowercase ? '上午' : '上午'; // 按需调整大小写
    } else {
      return isLowercase ? '下午' : '下午';
    }
  },
};

3. 在组件中引入这个自定义配置：

import { useState } from 'react';

export default function CustomizedDateTimePicker() {
  const [value, setValue] = useState(new Date());

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} locale={customLocale}>
      <MobileDateTimePicker
        label="选择日期时间"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

这样设置后，输入框里的AM/PM标签和弹窗里的AM/PM选项，都会变成你自定义的文本。

二、修改弹窗的OK和Cancel按钮文本 #

这个就简单多了，直接通过MobileDateTimePicker的专属props就能搞定：

• okText：自定义OK按钮的显示文本
• cancelText：自定义Cancel按钮的显示文本

把上面的组件代码加上这两个props就行：

<MobileDateTimePicker
  label="选择日期时间"
  value={value}
  onChange={(newValue) => setValue(newValue)}
  renderInput={(params) => <TextField {...params} />}
  // 自定义按钮文本
  okText="确认"
  cancelText="取消"
/>

弹窗底部的按钮立刻就会显示你设置的内容啦！

小提示 #

• 如果你用的是其他日期适配器（比如AdapterMoment），自定义本地化的具体写法会略有不同，但核心思路都是覆盖对应的本地化字段。
• 记得保持Material-UI和日期适配器的版本匹配，避免出现兼容性问题。

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