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

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

時(shí)區(qū)處理

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

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

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

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

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

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

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

以下示例說明了如何計(jì)算兩個(gè)日期之間的差異：

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

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

結(jié)論

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

最后，學(xué)習(xí) JavaScript 中的日期和時(shí)間 API 使開發(fā)人員能夠在各個(gè)領(lǐng)域創(chuàng)建功能強(qiáng)大、用戶友好且對(duì)時(shí)間敏感的應(yīng)用程序，從簡(jiǎn)單的時(shí)間顯示到計(jì)時(shí)器倒計(jì)時(shí)，再到復(fù)雜的調(diào)度和事件處理。了解如何有效地使用日期和時(shí)間數(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!