JavaScript：指定时区下日期的存储与解析方案问询

场景背景 #

管理员可为公司配置专属时区，所有用户处理日程时需始终基于公司时区操作：

• 数据统一以UTC格式存储在服务器
• 展示时固定转换为公司时区的时间

示例流程：

1. 管理员设置公司时区为Europe/Madrid（GMT+01:00）
2. 身处America/Sao Paulo（GMT-03:00）的用户A创建09:00-15:00的日程
3. 将该时间按Europe/Madrid时区转换为UTC（即08:00 UTC）后发送至服务器
4. 服务器存储UTC时间
5. 后续身处Europe/Athens（GMT+02:00）的用户访问时，需看到Europe/Madrid时区的09:00-15:00

核心需求 #

• 无论用户本地时区，展示日程时固定显示公司时区的时间
• 保存日程时，按公司时区转换为UTC存储
• 展示的时间不受夏令时（DST）影响，全年保持固定的时分（如09:00-15:00）
• 服务器采用SSR，首次渲染时无法获取用户本地时区

已尝试方案 #

• 使用date-fns-tz和moment-tz处理转换：转UTC正常，但转回公司时区时结果不符合预期
• 用countries-and-timezones获取偏移量手动调整：受服务器本地时区干扰，无法正确实现

一、核心思路 #

要实现固定时区的时间处理，关键是完全以公司时区为基准，彻底避免引入用户本地时区或服务器时区的干扰：

1. 存储时：将用户输入的「公司时区下的时分」绑定到具体日期，转换为UTC后存储
2. 展示时：从服务器取回UTC时间，强制转换为公司时区并格式化，忽略夏令时偏移

二、基于date-fns-tz的正确实现 #

1. 保存日程（前端/SSR）

假设用户输入的是startTime = "09:00"，endTime = "15:00"，公司时区为companyTimezone = "Europe/Madrid"，用户选择的日期为selectedDate = "2024-05-20"（YYYY-MM-DD格式）：

import { format, zonedTimeToUtc } from 'date-fns-tz';

// 1. 拼接公司时区下的完整日期时间字符串
const localStartStr = `${selectedDate}T${startTime}:00`;
const localEndStr = `${selectedDate}T${endTime}:00`;

// 2. 将公司时区的时间转换为UTC时间（明确指定时区，避免自动使用本地时区）
const utcStart = zonedTimeToUtc(localStartStr, companyTimezone);
const utcEnd = zonedTimeToUtc(localEndStr, companyTimezone);

// 3. 格式化为ISO UTC字符串发送给服务器
const payload = {
  start: format(utcStart, "yyyy-MM-dd'T'HH:mm:ss'Z'"),
  end: format(utcEnd, "yyyy-MM-dd'T'HH:mm:ss'Z'")
};

2. 展示日程（前端/SSR）

从服务器取回UTC时间后，强制转换为公司时区并格式化：

import { format, utcToZonedTime } from 'date-fns-tz';

// 服务器返回的UTC时间字符串
const serverUtcStart = "2024-05-20T08:00:00Z";
const serverUtcEnd = "2024-05-20T14:00:00Z";

// 1. 将UTC时间转换为公司时区的时间对象
const zonedStart = utcToZonedTime(serverUtcStart, companyTimezone);
const zonedEnd = utcToZonedTime(serverUtcEnd, companyTimezone);

// 2. 格式化时分（结果固定为公司时区的09:00-15:00）
const displayStart = format(zonedStart, "HH:mm");
const displayEnd = format(zonedEnd, "HH:mm");

三、规避夏令时（DST）的关键 #

如果需要全年固定显示同一时分（比如不管夏令时变化，始终显示09:00-15:00），建议：

• 存储日程时，额外保存「公司时区下的时分」字段（如startHourMinute: "09:00"）
• 展示时直接使用该字段，无需从UTC时间转换时分
• UTC时间仅用于日期排序和跨时区的时间计算

四、SSR场景的处理 #

由于SSR首次渲染无法获取用户本地时区，所有时间处理必须：

1. 完全依赖服务器返回的公司时区配置
2. 避免调用new Date()等依赖本地时区的API，所有转换都明确指定公司时区
3. 前端hydrate后，保持使用公司时区处理，不切换到用户本地时区

五、常见问题排查 #

• 转换结果不符合预期：检查是否在转换时明确指定了companyTimezone，避免默认使用服务器/用户本地时区
• 夏令时干扰：确保存储时是基于公司时区的标准时间转换，或直接存储固定时分字段

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