前端固定时区与根据地区动态展示时区的两种实现方式

原创

Lorin 洛林

发布于 2025-02-07 11:13:48

850

前言

在前端开发中，处理时间显示是一项常见的需求，尤其是当后端返回的是时间戳或者固定时区的时间时。本文将探讨两种主要方式：固定时区显示和根据用户所在地区动态展示时区，并提供相应的实现方案。

时区展示

固定时区展示

固定时区适用于所有用户都需要查看相同时区的时间，以后端返回时间戳为例：

const dayjs = require("dayjs");
const utc = require("dayjs/plugin/utc");
const timezone = require("dayjs/plugin/timezone");

dayjs.extend(utc);
dayjs.extend(timezone);

const timestamp = 1712345678000;  // 后端返回的时间戳
const beijingTime = dayjs(timestamp).tz("Asia/Shanghai").format("YYYY-MM-DD HH:mm:ss");
console.log(beijingTime);  // 输出北京时间

// 输出
2024-04-06 03:34:38

根据用户所在地区动态展示时区

根据用户所在地区自动调整时区，例如国际化应用：

时区获取

现代浏览器支持 Intl.DateTimeFormat().resolvedOptions().timeZone 获取用户所在时区：

const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
console.log(userTimeZone);  // 例如 "Asia/Shanghai"

根据用户时区动态展示

const dayjs = require("dayjs");
const utc = require("dayjs/plugin/utc");
const timezone = require("dayjs/plugin/timezone");

dayjs.extend(utc);
dayjs.extend(timezone);

const timestamp = 1712345678000;
const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const localTime = dayjs(timestamp).tz(userTimeZone).format("YYYY-MM-DD HH:mm:ss");
console.log(localTime);

// 输出
2024-04-06 03:34:38

后端返回时间格式处理

某些场景后端应用没有给我们返回标准的时间戳，而是某个一个时区：比如 Asia/Shanghai ，我们可以先标准化UTC时间再转为我们需要的时间：

// Asia/Shanghai
const dayjs = require("dayjs");
const utc = require("dayjs/plugin/utc");
const timezone = require("dayjs/plugin/timezone");

dayjs.extend(utc);
dayjs.extend(timezone);

const beijingTime = "2024-02-06 20:00:00"; // 原始北京时间
const nyTime = dayjs.tz(beijingTime, "Asia/Shanghai").tz("America/New_York").format("YYYY-MM-DD HH:mm:ss");

console.log(nyTime); // 转换后的纽约时间 2024-02-06 07:00:00

// utc 
const dayjs = require("dayjs");
const utc = require("dayjs/plugin/utc");
const timezone = require("dayjs/plugin/timezone");

dayjs.extend(utc);
dayjs.extend(timezone);

const utcTime = "2024-02-06T12:00:00Z";
const beijingTime = dayjs.utc(utcTime).tz("Asia/Shanghai").format("YYYY-MM-DD HH:mm:ss");
console.log(beijingTime);