如何通过date-fns获取对应本地化设置的星期数组？

方法一：通过format方法动态生成（灵活适配格式） #

这种方法可通过format的格式参数自由调整星期名称的显示形式，适配任意本地化配置。

步骤： #

1. 导入date-fns核心方法和目标本地化模块

import { format } from 'date-fns';
import { enUS } from 'date-fns/locale'; // 替换为需要的本地化，如zhCN、jaJP等

2. 生成星期数组

// 选一个基准日期（确保getDay返回0，即周日，这里用2024-01-07）
const baseDate = new Date(2024, 0, 7);
// 生成7天的日期序列，逐个格式化
const weekDays = Array.from({ length: 7 }, (_, index) => {
  const targetDate = new Date(baseDate);
  targetDate.setDate(baseDate.getDate() + index);
  // 用EEE表示短名，EEEE表示全名，EE表示极简名，按需替换
  return format(targetDate, 'EEE', { locale: enUS });
});

console.log(weekDays); // 输出: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

调整格式示例： #

• 要获取星期全名，将格式符改为EEEE：

  return format(targetDate, 'EEEE', { locale: enUS });
  // 输出: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
  

• 中文本地化示例：

  import { zhCN } from 'date-fns/locale';
  const weekDaysZh = Array.from({ length: 7 }, (_, index) => {
    const targetDate = new Date(baseDate);
    targetDate.setDate(baseDate.getDate() + index);
    return format(targetDate, 'EEE', { locale: zhCN });
  });
  // 输出: ['日', '一', '二', '三', '四', '五', '六']
  

方法二：直接读取本地化配置（高效简洁） #

date-fns的本地化模块内置了不同格式的星期名称集合，无需生成日期即可直接获取，性能更优。

示例： #

import { enUS } from 'date-fns/locale';

// 获取短名数组（顺序为周日到周六）
const weekDaysShort = enUS.localize.weekdays.short;
// 获取全名数组
const weekDaysLong = enUS.localize.weekdays.long;
// 获取极简名（单字母）
const weekDaysNarrow = enUS.localize.weekdays.narrow;

console.log(weekDaysShort); // ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

注意：所有官方维护的date-fns本地化模块都遵循这个结构，自定义本地化模块需确保格式一致。

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