基于Day.js或原生JS实现任意时区转用户本地时区

一、Day.js 实现方案 #

要实现动态时区转换，Day.js需要依赖utc和timezone两个插件，步骤如下：

1. 安装依赖

npm install dayjs dayjs-plugin-utc dayjs-timezone

2. 核心代码实现

import dayjs from 'dayjs'
import utc from 'dayjs-plugin-utc'
import timezone from 'dayjs-timezone'

// 加载Day.js插件
dayjs.extend(utc)
dayjs.extend(timezone)

// 动态传入原始时间数据：时间字符串 + 原始时区
const originalTimeStr = '2024-04-15T16:00:00'
const originalTimezone = 'America/Toronto'

// 1. 解析原始时区的时间为Day.js实例
const originalDateTime = dayjs.tz(originalTimeStr, originalTimezone)

// 2. 转换到指定目标时区
const targetTimezone = 'Australia/Sydney'
const convertedToTarget = originalDateTime.tz(targetTimezone)
console.log(convertedToTarget.format('YYYY年MM月DD日 HH:mm:ss z')) // 输出：2024年04月16日 05:00:00 AEST

// 3. 自动转换到用户系统时区
const userTimezone = dayjs.tz.guess()
const convertedToUser = originalDateTime.tz(userTimezone)
console.log(convertedToUser.format('YYYY年MM月DD日 HH:mm:ss z'))

关键说明：

• dayjs.tz(timeStr, timezone)可以直接解析指定时区的时间，避免UTC转换误差
• dayjs.tz.guess()会自动读取用户系统的默认时区，无需手动传入

二、原生JavaScript 实现方案 #

无需依赖第三方库，利用Intl.DateTimeFormat和DateAPI即可完成：

// 动态原始数据
const originalTimeStr = '2024-04-15T16:00:00'
const originalTimezone = 'America/Toronto'

// 安全解析指定时区的时间（兼容多数浏览器）
function parseTimeWithTimezone(timeStr, timezone) {
  const formatter = new Intl.DateTimeFormat('en-US', {
    year: 'numeric', month: '2-digit', day: '2-digit',
    hour: '2-digit', minute: '2-digit', second: '2-digit',
    timeZone: timezone,
    hour12: false
  })
  const parts = formatter.formatToParts(new Date(timeStr))
  const dateParts = {}
  parts.forEach(part => {
    if (part.type !== 'literal') dateParts[part.type] = part.value
  })
  // 用UTC构造日期，避免本地时区干扰
  return new Date(Date.UTC(
    dateParts.year,
    dateParts.month - 1,
    dateParts.day,
    dateParts.hour,
    dateParts.minute,
    dateParts.second
  ))
}

// 格式化日期到目标时区
function formatToTimezone(date, targetTimezone) {
  return new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric', month: 'long', day: 'numeric',
    hour: '2-digit', minute: '2-digit',
    timeZone: targetTimezone,
    timeZoneName: 'short'
  }).format(date)
}

// 转换到指定时区
const targetTimezone = 'Europe/Paris'
const safeOriginalDate = parseTimeWithTimezone(originalTimeStr, originalTimezone)
console.log(formatToTimezone(safeOriginalDate, targetTimezone)) // 输出：2024年4月15日 22:00 CEST

// 自动转换到用户时区
const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
console.log(formatToTimezone(safeOriginalDate, userTimezone))

关键说明：

• Intl.DateTimeFormat().resolvedOptions().timeZone可以获取用户当前系统时区
• 解析时通过formatToParts拆分时间组件，再用UTC构造日期，避免不同浏览器对带时区日期字符串的解析差异

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