如何基于设备日期格式使用date-fns格式化日期？

你当前用format(date, "P")显示固定格式的问题，根源是date-fns默认使用en-US区域设置，所以不管设备配置如何，都会输出美式日期格式。要适配设备本地日期格式，需要按以下步骤操作：

1. 获取设备的区域标识符 #

首先要拿到用户设备设置的首选区域（locale）：

• 浏览器环境：直接使用navigator.language获取，比如返回en-GB、zh-CN、fr-FR这类标识。
• React Native环境：借助react-native-localize库的getLocales()方法，取第一个结果的languageTag字段。

2. 引入对应date-fns的区域模块 #

date-fns提供了各区域的本地化模块，比如date-fns/locale/en-GB对应英式日期格式、date-fns/locale/zh-CN对应中文格式。需要根据获取到的区域标识符，引入对应的模块，同时做好 fallback 处理（比如设备返回en-AU时，可 fallback 到en-GB）。

3. 传入区域参数进行格式化 #

把获取到的区域模块作为第三个参数传入format函数，替换默认的区域设置。

示例代码（React Native场景） #

# 先安装依赖
npm install date-fns react-native-localize

import { format } from 'date-fns';
import { getLocales } from 'react-native-localize';
import enGB from 'date-fns/locale/en-GB';
import zhCN from 'date-fns/locale/zh-CN';
import frFR from 'date-fns/locale/fr';

// 映射设备区域到date-fns的本地化模块
const localeMap = {
  'en-GB': enGB,
  'zh-CN': zhCN,
  'fr-FR': frFR,
  // 按需添加更多需要支持的区域
};

// 获取设备首选区域
const deviceLocale = getLocales()[0].languageTag;
// 匹配对应模块，无匹配时用默认设置
const targetLocale = localeMap[deviceLocale] || undefined;

// 在组件中使用
<Text>
  {format(date, "P", { locale: targetLocale })}
</Text>

示例代码（浏览器场景） #

import { format } from 'date-fns';
import enGB from 'date-fns/locale/en-GB';
import deDE from 'date-fns/locale/de';

const localeMap = {
  'en-GB': enGB,
  'de-DE': deDE,
};

const deviceLocale = navigator.language;
const targetLocale = localeMap[deviceLocale] || undefined;

console.log(format(new Date(), "P", { locale: targetLocale }));

注意事项 #

• 并非所有设备区域都有对应的date-fns模块，需要提前规划要支持的区域，或通过字符串匹配做 fallback（比如将en-AU映射到en-GB）。
• 前端项目中注意按需引入区域模块，借助date-fns的 tree shaking 特性减少打包体积。

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