如何使用date-fns-tz正确获取各时区的时区缩写？

问题原因 #

date-fns的z格式符用于显示时区缩写时，完全依赖传入的locale内置的时区数据。每个locale只包含与自身地域关联的时区缩写映射：

• en-IN locale仅维护印度时区（Asia/Calcutta）的IST缩写
• en-US locale仅维护美国本土时区的EST/EDT等缩写
• 没有任何一个locale内置了全球所有时区的缩写映射

因此当你用单一locale处理非对应地域的时区时，date-fns找不到匹配的缩写，就会 fallback 显示GMT偏移格式。

解决方案 #

方法1：结合原生Intl API获取时区缩写 #

浏览器的Intl.DateTimeFormat API原生支持根据时区返回正确的缩写（包括夏令时自动切换），可以用它补全date-fns-tz的格式化结果：

import formatInTimeZone from 'date-fns-tz/formatInTimeZone';

// 封装获取时区缩写的工具函数
function getTimeZoneAbbr(date, timeZone) {
  return new Intl.DateTimeFormat('en-US', { 
    timeZone, 
    timeZoneName: 'short' 
  })
  .formatToParts(date)
  .find(part => part.type === 'timeZoneName').value;
}

// 使用示例
const timezone = "America/New_York";
// 先格式化日期时间部分
const dateTimePart = formatInTimeZone(parsedStartDate, timezone, 'dd MMMM yyyy hh:mm a');
// 获取对应时区的缩写
const tzAbbr = getTimeZoneAbbr(parsedStartDate, timezone);
// 拼接最终结果
const formattedDate = `${dateTimePart} ${tzAbbr}`;
// 输出示例：04 June 2023 09:00 AM EDT

方法2：动态匹配时区对应的locale（局限性大） #

如果仅需处理少数特定时区，可以维护一个时区到locale的映射表，根据目标时区动态切换locale：

import formatInTimeZone from 'date-fns-tz/formatInTimeZone';
import enIN from 'date-fns/locale/en-IN';
import enUS from 'date-fns/locale/en-US';
import enGB from 'date-fns/locale/en-GB';

const timezoneLocaleMap = {
  "Asia/Calcutta": enIN,
  "America/New_York": enUS,
  "Europe/London": enGB
};

const timezone = "Asia/Calcutta";
const formattedDate = formatInTimeZone(
  parsedStartDate, 
  timezone, 
  'dd MMMM yyyy hh:mm a z', 
  { locale: timezoneLocaleMap[timezone] || undefined }
);

这种方法仅适合固定的少数时区，无法覆盖全球所有场景。

总结 #

date-fns-tz的z格式符受限于locale的内置数据，无法单独实现全球时区的缩写显示。推荐使用Intl API结合date-fns-tz的方式，既能利用date-fns的格式化能力，又能借助原生API获取准确的时区缩写。

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