The key to dealing with JavaScript time zone issues is to choose the right method. 1. When using native Date objects, it is recommended to store and transfer in UTC time and convert it to the user's local time zone when presenting; 2. For complex time zone operations, moment-timezone can be used, which supports IANA time zone database and provides convenient formatting and conversion functions; 3. If you need to localize the display time and do not want to introduce third-party libraries, you can use Intl.DateTimeFormat; 4. It is recommended that the modern lightweight solution day.js is combined with timezone and utc plug-in, and its API is simple, good performance and supports timezone conversion.

The key to dealing with time zone issues in JavaScript is to understand the basic operations of time and how to correctly display or convert time zones in different scenarios. Although JavaScript native Date objects are powerful, they are based on the local time zone of the running environment by default, which is prone to errors in cross-region applications.

Here are some practical methods and tips to help you better deal with time zone problems.

Basics of Using Date Objects

JavaScript's Date objects can be created, formatted, and operated for time. However, it has a "pit": the output time is usually based on the local time zone where the user's browser is located.

 const now = new Date();
console.log(now); // The output is the local time

If you just want to get UTC time, you can use .toUTCString() or .getUTCHours() and other methods:

 console.log(now.toUTCString()); // Displayed as UTC time

suggestion:

• If you need a unified time standard, it is recommended to always use UTC time for storage and transmission.
• When displayed to users, convert according to their time zone.

Use moment.js and moment-timezone to handle complex time zones

If the project needs to frequently switch time zones or display multiple time zones, native Date will be more troublesome to operate. At this time, you can consider introducing moment-timezone .

Installation method (npm):

 npm install moment-timezone

Basic usage:

 const moment = require('moment-timezone');

// Get the current time of a certain time zone const newYorkTime = moment().tz("America/New_York").format();
console.log(newYorkTime);

Advantages:

• Supports a complete IANA time zone database
• It can be formatted, parsed and converted times easily

Notice:

• moment.js has entered maintenance mode and is suitable for use in old projects. Alternatives can be considered for new projects.

Use Intl.DateTimeFormat for localized display

If you do not want to introduce third-party libraries and want to display time by user's time zone and language format, you can use the built-in Intl.DateTimeFormat .

 const options = {
  timeZone: 'Asia/Shanghai',
  year: 'numeric', month: 'long', day: 'numeric',
  hour: '2-digit', minute: '2-digit'
};

const formatter = new Intl.DateTimeFormat('zh-CN', options);
console.log(formatter.format(new Date())); // Output Beijing time

The advantage of this method is that it does not require additional dependencies and can automatically adapt to the user's language habits.

Recommended modern solution: day.js timezone plugin

Day.js is a lightweight alternative to moment.js library, and the time zone function can also be supported through plug-ins.

Install:

 npm install dayjs
npm install @dayjs/plugin-timezone
npm install @dayjs/plugin-utc

Use:

 const dayjs = require('dayjs');
const utc = require('@dayjs/plugin-utc');
const timezone = require('@dayjs/plugin-timezone');

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

const beijingTime = dayjs().tz('Asia/Shanghai').format();
console.log(beijingTime);

advantage:

• Small size, good performance
• API is simple and low learning cost
• Supports UTC and time zone conversion

In general, JavaScript handles time zones in a variety of ways, and there are applicable scenarios from native to third-party libraries. If you just simply display local time, use Intl is enough; if you want to flexibly control the time zone, moment-timezone or day.js are good choices.

Basically that's it.

The above is the detailed content of How to handle time zones in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!