JavaScript provides APIs that allow developers to easily work with dates, times, and time zones. In this article, we'll learn how to use JavaScript's Date and Time API to get the current date and time, format them, and perform other operations.

Introduction to Date and Time in JavaScript

Dealing with dates and times is inevitable in web development. It is used in various online applications to display dates and times, countdown timers, and timestamps, as well as to schedule events and handle user interaction with time elements. JavaScript has a built-in Date object, which is a key tool for working with dates and times.

Have you ever visited a website (such as an e-commerce website) that displays items at a discounted price for a limited time? Or the opening countdown on the restaurant’s website? Or a timed animation on the website? These are some examples of the many scenarios for web development using date and time APIs.

Get the current date and time

Now how can we get the current date and time using the built-in Date object in JavaScript? this is very simple. All you need to do is create a new instance of the Date object without any parameters to get the current date and time. Next, log the current date and time to the console.

const currentDate = new Date();
console.log(currentDate);

This will log the current date and time to your console in the following format: Day-Month-Day-Year Hour-Minute-Second Time Zone. For example: Tue Jul 25 2023 12:37:10 GMT 0100 (West African Standard Time) .

Date The object also provides methods to extract various components of the date and time, such as year, month, day, hour, minutes, seconds, GMT, and time zone. Here is an example:

const currentDate = new Date();
const year = currentDate.getFullYear();
const month = currentDate.getMonth() + 1;
const hour = currentDate.getHours();
const minute = currentDate.getMinutes();
const timezoneOffsetHours = gmtOffsetInMinutes / -60;
const timezoneOffsetString = timezoneOffsetHours >= 0 ? `+${timezoneOffsetHours}` : `-${Math.abs(timezoneOffsetHours)}`;

console.log(`Year: ${year}`);
console.log(`Month: ${month}`);
console.log(`Hour: ${hour}`);
console.log(`Minute: ${minute}`);
console.log(`Timezone Offset: GMT${timezoneOffsetString}`);

This code creates a new Date object that contains the current date and time. Then it uses various methods of the Date object, such as getFullYear(), getMonth(), < /span>getHours() and getMinutes(), extract the various components of the date and time. We also did some calculations to get the time zone. When you run this code, you will see the current year, month, hour, minutes, and time zone on the console. Keep in mind that the results will depend on the current date and time of code execution.

Set the date and time format

Dates and times in JavaScript can also be formatted to suit specific needs. The Date object used above provides methods to extract the various components of a date and time and implement basic functionality. However, formatting dates and times to meet specific needs requires some additional steps. There are several JavaScript libraries available for formatting dates and times, including Moment.js, Luxon.js, Date-fns, Day.js, and others. In this section, we will learn about the Moment.js library.

To start using the Moment.js library, you need to include it in your project. You can do this using one of two methods:

1. Install it using npm by entering the following command in the terminal or command line: <span>npm </span><span>install</span><span> moment</span>
2. Link it from the CDN to your project. To link Moment.js to your project, add it to the head tag of your HTML file: <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment .min.js"></script>

const currentDate = new Date();
const formattedDateTime = moment(currentDate).format("YYYY-MM-DD HH:mm:ss");
console.log(formattedDateTime);

The output is 2023-07-25 13:04:38 (the date and time output is the time when I run the code). The format functions in Moment.js accept various format strings to customize the output as needed. In this example, we format it to display only the year, month, day, hour, minutes, and seconds.

Another example demonstrating the use of the Moment.js library is:

const addMinutes = moment().add(5, 'minutes');
console.log(`${addMinutes.format('h:mm a')}`);
const subtractDays = moment().subtract(3, 'days');
console.log(`${subtractDays.format('dddd, MMMM Do YYYY')}`)

Here’s what these lines of code do:

• 第一行代碼使用庫中的 moment() 函數(shù)創(chuàng)建一個表示當(dāng)前日期和時間的新 moment 對象。然后在此 moment 對象上調(diào)用 add() 方法，為其添加 5 分鐘。傳遞給 add() 方法的第一個參數(shù)是要添加的單位數(shù)。傳遞的第二個參數(shù)是要添加的時間單位（在本例中為“分鐘”）。
• 第二行代碼是將格式化的日期和時間記錄到瀏覽器控制臺的代碼。在上一行創(chuàng)建的新 moment 對象上調(diào)用 format() 方法。它接受一個字符串作為參數(shù)來指定我們希望顯示日期和時間的格式。在本例中，格式為：'h:mm a'。 “h”代表小時，“mm”代表 12 小時制格式的分鐘，“a”代表 AM/PM 名稱。例如，如果時間是 5:30，我們添加 5 分鐘，那么時間將是 5:35。
• 第三行代碼與第一行非常相似，但它執(zhí)行不同的操作。它使用庫中的 moment() 函數(shù)創(chuàng)建一個表示當(dāng)前日期和時間的新時刻對象。然后，在此 moment 對象上調(diào)用 subtract() 方法，從中減去 3 天。與 add() 方法一樣，傳遞給 subtract() 方法的第一個參數(shù)是要減去的單位數(shù)。傳遞的第二個參數(shù)是要減去的時間單位（在本例中為“天”）。
• 在第四行代碼中，我們將格式化的日期和時間記錄到控制臺。在新創(chuàng)建的 moment 對象上調(diào)用 format() 方法，它接受一個字符串作為參數(shù)來指定我們要顯示日期的格式。我們指定的格式是“dddd, MMMM Do YYYY”。 “dddd”代表完整的工作日名稱，“MMMM”代表完整的月份名稱，“Do”代表帶后綴的月份中的日期，“YYYY”代表年份。假設(shè)當(dāng)前日期是 2023 年 7 月 25 日，我們從中減去 3 天。日期將為“2023 年 7 月 22 日星期六”。

這是如何使用 Moment.js 在 JavaScript 中操作日期和時間的快速演示。

時區(qū)處理

正確處理時區(qū)對于與多個國家/地區(qū)的用戶交互的應(yīng)用至關(guān)重要。默認(rèn)情況下，JavaScript 中的 Date 對象使用用戶的系統(tǒng)時區(qū)。然而，它不提供對特定時區(qū)工作的直接支持。使用 ECMAScript 國際化 API (ECMA-402) 中的 Intl.DateTimeFormat 對象來有效管理時區(qū)。該格式允許您以本地化格式顯示日期和時間信息，包括時區(qū)數(shù)據(jù)。

以下是如何顯示特定時區(qū)的當(dāng)前日期和時間的快速演示：

const date = new Date(Date.UTC(2023, 6, 25, 3, 0, 0));
console.log(new Intl.DateTimeFormat("en-US").format(date));
console.log(new Intl.DateTimeFormat("en-GB").format(date));
console.log(new Intl.DateTimeFormat('en-GB', { dateStyle: 'full', timeStyle: 'long', timeZone: 'long', timeZone: 'Australia/Sydney' }).format(date));

• 第一行代碼創(chuàng)建一個新的Date對象，名為date，表示日期和時間。
• 在第二行代碼中，我們使用 Intl.DateTimeFormat 對象將 date 格式化為美國英語語言環(huán)境。 format() 方法用于格式化日期對象，然后返回格式化日期的字符串表示形式。在美國英語區(qū)域設(shè)置中，格式為月-日-年順序。因此輸出將為 7/25/2023。
• 第三行代碼也是如此，但在本例中，我們將 date 格式化為英式英語語言環(huán)境。格式為日-月-年順序。因此輸出將為 25/07/2023。
• 第四行使用 Intl.DateTimeFormat 對象，并提供以英式英語語言環(huán)境格式化 date 的選項，并將時區(qū)設(shè)置為“澳大利亞/悉尼”。 “dateStyle”選項設(shè)置為“full”，“timeStyle”選項設(shè)置為“l(fā)ong”。 “完整”日期樣式提供日期的完整文本表示，“長”時間樣式提供時間的長文本表示。 “timeZone”選項設(shè)置為“澳大利亞/悉尼”，這意味著日期和時間將以澳大利亞悉尼時區(qū)顯示。

輸出將如下所示：2023 年 7 月 25 日星期二 13:00:00 GMT+10。實際輸出可能會因您當(dāng)前的時區(qū)而異。

請注意，在上面的示例中，我們使用“6”代表七月，而不是“7”，后者代表月份位置。這是因為，在 JavaScript 中，Date 對象（以及 Intl.DateTimeFormat 對象）的月份參數(shù)是從零開始的，這意味著一月由 0 表示，二月由 1 表示，依此類推。因此，要表示 7 月，您應(yīng)該使用 6 而不是 7，而對于 8 月，您應(yīng)該使用 7 而不是 8。

執(zhí)行日期和時間操作

JavaScript 中的 Date 對象提供了多種執(zhí)行日期和時間操作的方法，例如計算兩個日期之間的差異、添加或刪除時間間隔以及比較日期。一些常用的方法有 getTime()、setTime()、getFullYear()、getMonth()、getDate()、getHours()、phpcn cphpcn>getMinutes () 和 getSeconds()。 這些操作對于計算持續(xù)時間、設(shè)置截止日期和處理應(yīng)用程序中與時間相關(guān)的邏輯等任務(wù)至關(guān)重要。

以下示例說明了如何計算兩個日期之間的差異：

const startDate = new Date("2023-07-01");
const endDate = new Date("2023-07-17");
const timeDifference = endDate.getTime() - startDate.getTime();
const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
console.log(`The days difference is: ${daysDifference}`);

代碼說明

• 第一行代碼創(chuàng)建一個新的 Date 對象，表示日期 2023 年 7 月 1 日。Date 構(gòu)造函數(shù)使用 和格式為“YYYY-MM-DD”的日期字符串來指定所需的開始時間日期。
• 另一個新的 Date 對象表示日期 2023 年 7 月 17 日，也是使用指定格式的結(jié)束日期創(chuàng)建的。
• 第三行代碼是計算兩個新創(chuàng)建的日期對象“endDate”和“startDate”之間的差異。 getTime()方法用于獲取每個Date對象的時間值。通過從 endDate 時間值減去 startDate 時間值，我們得到兩個日期之間的時間差（以毫秒為單位）。
• 第四行代碼：要計算兩個日期之間的差異，請將“timeDifference”（以毫秒為單位）除以一天中的毫秒數(shù)，即 1000 毫秒乘以 60 秒乘以 60分鐘乘以 24 小時。結(jié)果就是兩個日期之間的天數(shù)差。 Math.floor() 函數(shù)用于將結(jié)果向下舍入到最接近的整數(shù)，以確保我們得到代表天數(shù)的整數(shù)。
• 第五行代碼將“daysDifference”記錄到控制臺。輸出將是 startDate 和 endDate 之間的天數(shù)。在此示例中，輸出將為 The days Difference is: 16，表示 2023 年 7 月 1 日到 2023 年 7 月 17 日之間有 16 天。

總之，代碼示例使用 Date 對象和簡單的算術(shù)運算來計算兩個提供的日期之間的天數(shù)差異（startDate 和 endDate）。這對于許多與日期相關(guān)的計算非常有用，例如確定兩個事件之間的持續(xù)時間或給定截止日期之前的天數(shù)。

結(jié)論

在本文中，我們探討了在 JavaScript 中處理日期和時間的各個方面。我們討論了如何執(zhí)行常見的日期和時間計算，包括添加和減去時間間隔、比較日期以及計算日期之間的差異。我們還探索了流行的 Moment.js 庫，它提供了處理日期和時間的附加功能。本文還向我們展示了如何使用 Intl.DateTimeFormat 對象格式化日期和時間。

最后，學(xué)習(xí) JavaScript 中的日期和時間 API 使開發(fā)人員能夠在各個領(lǐng)域創(chuàng)建功能強(qiáng)大、用戶友好且對時間敏感的應(yīng)用程序，從簡單的時間顯示到計時器倒計時，再到復(fù)雜的調(diào)度和事件處理。了解如何有效地使用日期和時間數(shù)據(jù)是任何 JavaScript 開發(fā)人員的必備技能，它可以顯著提高應(yīng)用程序的功能和可用性。

The above is the detailed content of Get the current date and time using JavaScript API to get the current date and time. For more information, please follow other related articles on the PHP Chinese website!