JS中UTC时间处理问题：甘特图起始时间偏移解决方案咨询

问题背景 #

后端返回的甘特图起止时间是UTC标准格式（带Z后缀）：

"horizont_start": "2024-05-01T00:00:00Z",
"horizont_end": "2025-01-26T00:00:00Z"

但通过new Date()解析后，本地时区（乌兹别克斯坦GMT+05）会自动将UTC时间转换为本地时间，导致显示的起始时间变成05:00:00，而非预期的00:00:00。

解决方法 #

1. 显示环节强制使用UTC格式化（推荐） #

状态管理中存储的getTime()时间戳本身是正确的（对应UTC时间的毫秒数），问题出在渲染显示时的时区转换。只需在生成时间轴标签时，使用UTC相关方法格式化日期：

// 格式化UTC时间的工具函数
function formatUTCTime(timestamp) {
  const date = new Date(timestamp);
  // 使用getUTC系列方法获取UTC时间的年、月、日、时等
  const year = date.getUTCFullYear();
  const month = String(date.getUTCMonth() + 1).padStart(2, '0');
  const day = String(date.getUTCDate()).padStart(2, '0');
  const hours = String(date.getUTCHours()).padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:00:00`;
}

// 渲染时间轴标签时调用该函数
// 示例：axisDates.map(timestamp => <div>{formatUTCTime(timestamp)}</div>)

2. 手动构造UTC时间的Date对象 #

如果需要在创建Date对象时就明确对应UTC时间，避免本地时区自动转换，可以拆分后端的时间字符串，用Date.UTC()构造：

// 解析UTC时间字符串为Date对象的工具函数
function parseUTCDate(utcStr) {
  if (!utcStr) return null;
  // 拆分"2024-05-01T00:00:00Z"为日期和时间部分
  const [dateStr, timeStr] = utcStr.split('T');
  const [year, month, day] = dateStr.split('-').map(Number);
  const [hours, minutes, seconds] = timeStr.replace('Z', '').split(':').map(Number);
  
  // Date.UTC返回UTC时间的毫秒数，再创建Date对象
  return new Date(Date.UTC(year, month - 1, day, hours, minutes, seconds));
}

在父组件中使用该函数传入props：

<NewGanttChart
  start={
    parseUTCDate(gantt?.horizont_start) || 
    new Date(Date.UTC(new Date().getFullYear(), 0, 1))
  }
  end={
    parseUTCDate(gantt?.horizont_end) || 
    new Date()
  }
  data={gantt?.machine_types || []}
  isTooltip={true}
  tooltip={tooltip}
/>

3. 确认时间戳存储逻辑 #

start.getTime()和end.getTime()得到的是UTC时间戳，本身与后端的UTC时间完全匹配，状态管理中的存储无需修改。所有偏移问题都来自前端显示时的本地时区转换，因此重点放在显示环节的UTC格式化即可。

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