date-fns多语言日期格式化：如何适配语言规范而非硬编码格式？

在React Web应用中使用date-fns工具，需支持英语、法语和西班牙语三种语言。目前的实现方式如下：

import en from 'date-fns/locale/en';
import fr from 'date-fns/locale/fr';
import es from 'date-fns/locale/es';
import { format } from 'date-fns';
...
const locale = fr; // 或en、es
format(new Date(), 'MMMM d, yyyy h:mm a', { locale })

当前输出情况：

• 英语环境：April 14, 2023 1:40 PM
• 法语环境：avril 14, 2023 1:40 PM
• 西班牙语环境：abril 14, 2023 1:40 PM

疑问：这种方式仅翻译了日期相关词汇，但所有语言仍采用相同的格式顺序，不确定avril 14, 2023 1:40 PM是否符合法语的日期格式规范。

需求：是否存在无需硬编码格式，直接按所选语言规范显示日期的方法？

有，date-fns提供了预定义的本地化格式常量，可直接根据所选语言自动应用符合当地规范的日期时间格式，无需手动硬编码格式字符串。

具体实现步骤 #

1. 导入对应语言的本地化文件、format和formatLocale函数

import en from 'date-fns/locale/en';
import fr from 'date-fns/locale/fr';
import es from 'date-fns/locale/es';
import { format, formatLocale } from 'date-fns';

2. 根据当前语言获取本地化格式器

// 假设currentLocale为当前选中的语言，值为en/fr/es
const formatter = formatLocale({ locale: currentLocale });

3. 使用预定义格式常量生成符合规范的日期
   以完整日期+时间为例，使用formatter.formatLong('datetime')：

const formattedDate = format(new Date(), formatter.formatLong('datetime'), { locale: currentLocale });

不同语言下的输出会自动遵循地域规范：

• 英语：April 14, 2023, 1:40 PM
• 法语：14 avril 2023 à 13:40（符合法语「日-月-年」的日期顺序）
• 西班牙语：14 de abril de 2023, 13:40（符合西班牙语日期格式）

常用预定义格式类型 #

除datetime外，还有多种常用预定义格式可选：

• date：仅显示日期，如法语输出14 avril 2023
• time：仅显示时间，如法语输出13:40
• month：仅显示月份相关，如法语输出avril 2023

这种方式无需手动维护格式字符串，date-fns会自动适配所选语言的地域日期规范，避免硬编码带来的格式不合规问题。

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