前端TypeScript（Angular）如何通过州/省获取时区？

针对你的Angular应用需求，以下是几个纯前端可用的方案，无需依赖Node.js专属包：

方案一：自定义映射表 + 原生Intl API（最轻量化） #

因为当前仅关注美国和加拿大，后续扩展也可控，这种方式轻量且完全适配你的需求：

1. 维护一个精简的州/省与时区ID映射表，包含全称、缩写对应关系：

   const regionTimezoneMap = {
     // 美国（键为国家代码，值为州缩写/全称到时区ID的映射）
     'US': {
       'CA': 'America/Los_Angeles',
       'California': 'America/Los_Angeles',
       'NY': 'America/New_York',
       'New York': 'America/New_York',
       'TX': 'America/Chicago',
       'Texas': 'America/Chicago',
       // 按需补充其他州
     },
     // 加拿大
     'CA': {
       'ON': 'America/Toronto',
       'Ontario': 'America/Toronto',
       'BC': 'America/Vancouver',
       'British Columbia': 'America/Vancouver',
       'QC': 'America/Montreal',
       'Quebec': 'America/Montreal',
       // 按需补充其他省
     }
   };
   

2. 利用原生Intl.DateTimeFormat API获取时区名称、偏移量等信息，无需额外安装包：

   function getTimezoneInfo(countryCode: string, region: string) {
     const timezoneId = regionTimezoneMap[countryCode]?.[region];
     if (!timezoneId) return null;
   
     const formatter = new Intl.DateTimeFormat('en-US', {
       timeZone: timezoneId,
       timeZoneName: 'long',
       hour: '2-digit'
     });
     // 通过格式化日期提取时区名称
     const parts = formatter.formatToParts(new Date());
     const timezoneName = parts.find(part => part.type === 'timeZoneName')?.value;
     // 获取当前偏移量（单位：分钟）
     const offset = new Date().getTimezoneOffset() * -1; // 注意原生API返回的是UTC与本地的差值，需取反
   
     return {
       id: timezoneId,
       name: timezoneName,
       offsetMinutes: offset
     };
   }
   

方案二：使用timezone-support轻量库 #

这是一个专为前端设计的时区处理库，支持TypeScript，体积小且无Node.js依赖：

• 安装：npm install timezone-support
• 使用示例（结合自定义映射表）：

  import { getTimezoneOffset, parseTimezone } from 'timezone-support';
  
  // 先通过映射表拿到对应时区ID
  const timezoneId = regionTimezoneMap['US']['CA'];
  const timezoneData = parseTimezone(timezoneId);
  // 获取指定日期的时区偏移量（单位：分钟）
  const offset = getTimezoneOffset(new Date(), timezoneData);
  // 获取时区名称
  const timezoneName = timezoneData.name;
  

方案三：使用@vvo/tzdb完整时区数据库 #

该库提供了完整的IANA时区数据集，前端可用且支持TypeScript，适合后续扩展多国家场景：

• 安装：npm install @vvo/tzdb
• 使用示例：

  import { allTimezones } from '@vvo/tzdb';
  
  // 通过映射表拿到时区ID后，查询详细信息
  function getFullTimezoneDetails(timezoneId: string) {
    return allTimezones.find(tz => tz.name === timezoneId);
  }
  
  // 返回结果包含时区ID、名称、UTC偏移、夏令时规则等信息
  const nyTimezone = getFullTimezoneDetails('America/New_York');
  

选型建议 #

• 若当前仅需美加地区，优先选方案一，无需额外依赖，性能最优；
• 若需要更专业的时区计算（如夏令时切换处理），可选方案二；
• 若后续计划扩展大量国家，方案三的完整数据集能减少手动维护映射表的工作量。

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