mui-pickers RTL模式下KeyboardDatePicker日期格式异常求助

开发者阿泽

2026-7-19

解决MUI Date Pickers在RTL（阿拉伯语）下的日期格式反转问题

问题现象

为阿拉伯语设置direction:"rtl"时出现以下格式异常：

使用"DD/MMM/YYYY"格式，输出变为MMM/DD/YYYY
使用带HH:mm的KeyboardDatePickerTime，输出格式变为MMM/YYYY, HH:mm/DD

临时解决方案

由于原MUI Pickers仓库已设为只读且新版仍存在该问题，可通过以下方法修复：

用CSS强制日期输出为LTR方向
RTL布局会错误反转格式化后的日期字符串顺序，给日期显示容器添加LTR样式，确保格式不受布局方向影响：

.date-display {
  direction: ltr;
  unicode-bidi: embed;
}

或在React组件中使用内联样式：

<div style={{ direction: 'ltr', unicodeBidi: 'embed' }}>
  {selectedDate.format('DD/MMM/YYYY')}
</div>

自定义日期格式化函数
不依赖库的自动格式化结果，手动拼接日期组件，彻底避免RTL干扰：

// 日期格式化
const formatCustomDate = (date) => {
  const day = date.format('DD');
  const month = date.format('MMM');
  const year = date.format('YYYY');
  return `${day}/${month}/${year}`;
};

// 日期+时间格式化
const formatCustomDateTime = (date) => {
  const baseDate = formatCustomDate(date);
  const time = date.format('HH:mm');
  return `${baseDate}, ${time}`;
};