如何使用date-fns按用户所选区域语言设置格式化日期

完全可以通过date-fns实现按地区语言区域设置显示日期的需求，操作步骤如下：

• 导入date-fns核心格式化函数及对应区域配置

import { format } from 'date-fns'
// 按需导入需要用到的区域配置，所有内置区域都存放在date-fns/locale目录下
import enUS from 'date-fns/locale/en-US'
import enCA from 'date-fns/locale/en-CA'

• 调用format方法时传入对应区域配置即可自动适配显示规则

const sampleDate = new Date(2021, 0, 12) // 2021年1月12日

// 适配en_US区域
console.log(format(sampleDate, 'PP', { locale: enUS }))
// 输出：Jan 12, 2021

// 适配en_CA区域
console.log(format(sampleDate, 'PP', { locale: enCA }))
// 输出：12 Jan 2021

补充说明：格式化占位符PP是date-fns预置的本地化长日期格式，会自动根据传入的区域匹配对应地区的年月日排序、分隔符等显示习惯，无需手动调整顺序。如果需要自定义日期显示的粒度，可以替换为其他适配本地化的占位符使用。

内容的提问来源于stack exchange，提问作者Cristian Flórez