React如何使用新版date-fns实现日历星期名称正确显示

你遇到的「输出数字而非预期星期名称」的现象，来自date-fns v2及以上版本的两个核心破坏性更新：

• 格式标记规则完全重构
  • 旧版date-fns（v1）中：d系列标记对应星期维度的展示，dddd直接输出完整星期名称
  • 新版date-fns（v2/v3）切换为CLDR通用标准后，d系列标记改为表示「月内日期的数字值」，原本对应星期名称的展示规则迁移到了E系列：
    • EEE：缩写形式的星期名（如"Mon"）
    • EEEE：完整形式的星期名（如"Monday"）
      你当前使用的"dddd"格式在新版规则下会直接匹配月日期数字输出，完全不符合星期展示的预期。
• 本地化配置从内置改为按需引入
  旧版date-fns默认内置英语语言环境，无需额外配置就能输出正确的英文星期文本；新版采用按需加载逻辑，不手动引入对应语言的配置，即使格式标记正确也可能出现输出异常。

1. 替换星期展示的格式标记 #

把原来的格式常量从"dddd"改成新版标准的完整星期名标记：

// 原v1兼容写法
// const dateFormat = "dddd";
// 新版v2+兼容写法，输出完整星期名
const dateFormat = "EEEE";

如果需要展示缩写形式的星期名（如"Mon"），可以把格式值替换为"EEE"。

2. 按需引入对应语言的本地化配置 #

如果需要输出特定语言的星期文本（比如中文的「周一」「周日」），需要手动引入对应locale配置，作为第三个参数传给format函数：

import { format, startOfWeek, addDays} from 'date-fns';
// 引入对应语言环境，需要中文展示就把enUS替换为zhCN
import { enUS } from 'date-fns/locale';

renderDays() {
    const dateFormat = "EEEE"; // 替换为正确的星期格式标记
    const days = [];
    let startDate = startOfWeek(this.state.currentMonth);

    for (let i = 0; i < 7; i++) {
      days.push(
        <div className="col col-center" key={i}>
          {/* 第三个参数传入locale配置 */}
          {format(addDays(startDate, i), dateFormat, { locale: enUS })}
        </div>
      );
    }

    return <div className="days row">{days}</div>;
}

注意：如果不传入locale配置，format函数会默认采用英语环境输出，虽然能展示英文星期，但如果需要中文展示就必须引入对应的locale文件

3. 按需调整周的起始规则 #

旧版date-fns的startOfWeek默认从周一开始计算周维度，新版默认从周日开始。如果你的日历需要符合国内用户习惯（从周一开始），可以给startOfWeek传入配置项调整：

let startDate = startOfWeek(this.state.currentMonth, {
  weekStartsOn: 1, // 配置项规则：0=周日为周首日，1=周一为周首日
  locale: enUS
})

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