Antd 4.4.2 DatePicker设置pt-BR后星期名称显示异常求助

云上老周

2026-7-24

Antd 4.4.2 DatePicker pt-BR 星期显示数字问题修复方案

因为你无法升级React和Antd版本，针对DatePicker日历星期显示为数字而非葡萄牙语缩写的问题，可通过以下两种方案解决：

方案一：自定义Locale覆盖星期文本

Antd的DatePicker支持通过locale属性传入自定义区域配置，我们可以基于官方pt-BR locale修改星期文本后传入：

import React from 'react';
import { DatePicker } from 'antd';
// 引入官方pt-BR locale
import ptBRDateLocale from 'antd/es/date-picker/locale/pt_BR';

// 覆盖星期文本为葡萄牙语缩写
const customPtBRDateLocale = {
  ...ptBRDateLocale,
  weekDays: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
};

const YourComponent = () => {
  return (
    <DatePicker locale={customPtBRDateLocale} />
  );
};

export default YourComponent;

如果你的项目使用了全局ConfigProvider配置pt-BR区域，只需给DatePicker单独传入上述自定义locale即可，不会影响其他组件的全局区域设置。

方案二：DOM文本替换（备选方案）

若方案一未生效，可通过组件挂载后手动替换日历表头的星期文本：

import React, { useEffect, useRef } from 'react';
import { DatePicker } from 'antd';

const YourComponent = () => {
  const pickerRef = useRef(null);
  const weekTexts = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'];

  useEffect(() => {
    if (pickerRef.current) {
      // 找到日历表头的星期元素
      const weekCells = pickerRef.current.querySelectorAll('.ant-calendar-week-header th');
      weekCells.forEach((cell, index) => {
        if (weekTexts[index]) {
          cell.textContent = weekTexts[index];
        }
      });
    }
  }, []);

  return (
    <DatePicker ref={pickerRef} />
  );
};

export default YourComponent;