React中使用date-fns-tz将UTC时间字符串转换为指定时区时间的方案咨询

实现逻辑 #

你拿到的输入只有UTC时区的时分部分，缺少完整日期，首先需要将其拼接为完整的UTC时间字符串（这里选择1970-01-01作为固定基准日期，避免日期变动、夏令时切换干扰时分转换结果），再通过date-fns-tz提供的时区转换方法转为目标时区时间，最后格式化输出时分即可。

代码实现 #

首先确保已安装依赖：
npm install date-fns date-fns-tz
核心代码如下：

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

/**
 * UTC时分字符串转换为目标时区时分字符串
 * @param {string} utcTimeStr 输入UTC时分，格式为HH:mm，如'18:35'
 * @param {string} targetTimeZone 目标时区IANA标识，如'America/New_York'
 * @returns {string} 目标时区时分，格式为HH:mm
 */
function convertUtcTimeToTargetZone(utcTimeStr, targetTimeZone) {
  // 拼接为固定基准日的UTC标准时间字符串
  const utcFullTime = `1970-01-01T${utcTimeStr}:00Z`
  // 转换为目标时区的时间对象
  const targetZonedDate = utcToZonedTime(utcFullTime, targetTimeZone)
  // 格式化输出时分
  return format(targetZonedDate, 'HH:mm', { timeZone: targetTimeZone })
}

// 测试示例
console.log(convertUtcTimeToTargetZone('18:35', 'America/New_York')) // 输出 14:35

注意事项 #

如果你的业务需要关联当日的实际时区偏移（比如需要考虑转换当天目标时区是否处于夏令时），可以将基准日期替换为当日的UTC日期，替换拼接逻辑即可：

// 获取当日UTC日期，替换原有固定基准日
const todayUtcDate = format(new Date(), 'yyyy-MM-dd', { timeZone: 'UTC' })
const utcFullTime = `${todayUtcDate}T${utcTimeStr}:00Z`

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