1. Problem cause analysis

1. The time returned by the server may be UTC time

   • For example, the backend returns "2024-09-25T09:00:00Z"
   • Z represents UTC time
   • new Date("2024-09-25T09:00:00Z") parses the same instant; local formatting methods then display it in the local time zone

2. The front-end environment uses the local time zone by default

   • new Date() creates the current instant; Date stores a timestamp, while the local time zone is used for parsing and display and is not stored in the object
   • The same instant has clock readings eight hours apart in UTC+8 and UTC+0, while its timestamp stays the same

3. JSON time string without time zone identifier

   • Such as "2024-09-25 09:00:00"
   • The space-separated format is outside the standard date-time format; parsing may vary between implementations, so specify the time zone

2. Common solutions

1️⃣ The unified time is UTC

// 服务器返回 UTC 时间
const utcTime = "2024-09-25T09:00:00Z";
const date = new Date(utcTime); 

console.log(date.toUTCString());  // UTC 格式
console.log(date.toISOString());   // ISO 格式

• Use toISOString() to ensure consistency (UTC time) across different clients.

2️⃣ Switch to local time display

const date = new Date("2024-09-25T09:00:00Z");
console.log(date.toLocaleString());      // 本地格式
console.log(date.toLocaleString('zh-CN')); // 中文格式

✅ toLocaleString() will automatically convert the display according to the time zone of the browser.

3️⃣ Use libraries such as moment.js / dayjs

• Recommended dayjs + utc + timezone plug-in

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

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

const serverTime = "2024-09-25T09:00:00Z";

// 转为本地时区
const localTime = dayjs.utc(serverTime).tz(dayjs.tz.guess()).format('YYYY-MM-DD HH:mm:ss');

console.log(localTime); // 根据浏览器时区显示正确时间

• Advantages:

  1. Support any time zone conversion
  2. Avoid new Date() differences when parsing strings directly

4️⃣ The front and back ends agree on a unified time format

1. The backend uniformly returns UTC time ISO format

   • "2024-09-25T09:00:00Z"

2. The front end uniformly resolves to local time or specified time zone

Avoid returning "2024-09-25 09:00:00" directly (without time zone information)

5️⃣ Specify the time zone explicitly instead of adjusting the offset

const serverDate = new Date("2024-09-25T09:00:00Z"); // 用 Z 明确 UTC
console.log(serverDate.toLocaleString()); // 按本地时区格式化，同一时刻不变

Append Z before parsing only when a date-time without an offset is known to represent UTC; otherwise use its actual offset or a time-zone library. Parsing as local time and then adjusting the offset can fail at daylight-saving transitions. Date parsing.

3. Summary of interview perspective

• Core points:

  1. new Date() represents the current instant; its timestamp and display time zone are separate concepts
  2. ISO 8601 string with Z for UTC
  3. In the standard format, date-only strings such as 2024-09-25 are parsed as UTC; date-time strings without an offset, such as 2024-09-25T09:00:00, are parsed as local time
  4. Unifying the front-end and back-end time formats is the key

• Practical Solution:

  • Return to UTC → The front end uses dayjs.utc().tz() or toLocaleString() to display locally
  • Or unify all front-end processing to UTC (both backend and front-end use UTC)

Appendix

1. What is UTC time?

UTC（Coordinated Universal Time）

• Chinese name: Coordinated Universal Time
• It is a standard time that does not change with time zone changes.
• Similar to "World Unified Time", consistent globally
• Used in networks, servers and cross-time zone systems to avoid local time differences

📌 Features:

1. Not affected by daylight saving time
2. Almost the same as GMT (Greenwich Mean Time)
3. Standard format: YYYY-MM-DDTHH:mm:ssZ, the Z at the end represents UTC

2. Examples of common formats

Format	Meaning	Description
2024-09-25T09:00:00Z	UTC time	Z represents UTC
2024-09-25T09:00:00+08:00	East Eighth District Time	+08:00 means 8 hours ahead of UTC
2024-09-25 09:00:00	No time zone	Nonstandard format; parsing may vary between implementations

3. The relationship between UTC and local time

const utcDate = new Date("2024-09-25T09:00:00Z"); // UTC
console.log(utcDate.toUTCString()); // Wed, 25 Sep 2024 09:00:00 GMT
console.log(utcDate.toLocaleString()); // 根据浏览器时区转换显示

In UTC+8, the corresponding local time is shown below; the exact display format depends on the locale:

2024-09-25 17:00:00

✅ UTC+8 → add 8 hours

4. Why use UTC

1. Sync across time zones

   • The front-end, back-end, and database are all saved in UTC.
   • Avoid time confusion caused by daylight saving time or different time zones

2. Unified display on the front end

   • The server uniformly returns UTC
   • The front end displays local time according to user time zone conversion

3. Log, scheduling, scheduled tasks

   • Recorded in UTC, consistent for global users and convenient for statistics

5. Common front-end operations

1️⃣ Convert to local time

const utcTime = "2024-09-25T09:00:00Z";
const localTime = new Date(utcTime).toLocaleString();
console.log(localTime); // 浏览器本地时区显示

2️⃣ Display UTC time in ISO format

const now = new Date();
console.log(now.toISOString()); // 例如 2024-09-25T09:00:00.000Z，取决于当前时刻

3️⃣ Use dayjs / moment to convert time zone

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

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

const serverTime = "2024-09-25T09:00:00Z";
const localTime = dayjs.utc(serverTime).tz(dayjs.tz.guess()).format('YYYY-MM-DD HH:mm:ss');

console.log(localTime);

✅ Automatically displays the correct time based on the browser time zone.

6. Interview summary points

1. UTC is unified time and is not affected by time zones
2. The server returns UTC uniformly, and the front end displays it according to the local time zone
3. Avoid using time strings without time zones, as they may cause parsing errors
4. JS Date stores a timestamp; local and UTC methods interpret and display the same instant differently