如何使用 JavaScript 比较两个日期?
在本教程中，我们将学习使用 JavaScript 比较两个日期。日期也是 JavaScript 中的数据类型之一，大多数开发人员在开发应用程序时都会使用它。
让我们通过一个实际的例子来了解比较日期的必要性。大多数人都在使用互联网数据，公司会发送一条消息，例如"您的数据包有效期还剩 2 天"。此外，用户可以在网络提供的应用程序中看到相同的通知。这一切都是由于日期比较而发生的。
在这里，我们有两种不同的方法来比较这两个日期。
比较两个日期的总毫秒数
当我们使用 Date() 类的对象创建新日期时。我们使用 getTime() 方法获取以毫秒为单位的时间。 getTime() 方法返回自 1970 年 1 月 1 日(Unix 纪元开始之时)以来的总毫秒数。我们可以比较总毫秒数并确定日期是否相同。
语法
用户可以按照以下语法比较两个日期的总毫秒数。
let date1 = new Date();
let date2 = new Date(2012, 11, 21);
// 比较日期
if ( date1.getTime() < date2.getTime() ) {
// date 1 晚于 date2
} else if ( date1 > date2 ) {
// date1 晚于 date2
} else {
// date1 和 date2 相同
}
示例
在下面的示例中，我们实现了上述方法。我们创建了两个新的 Date() 类对象，并使用 if-else 语句比较了毫秒数的总数。用户可以在输出中看到不同日期之间的比较结果。
<html> <head> </head> <body> <h2> Comparing two dates with JavaScript. </h2> <h4> compare two date by <i> using total milliseconds </i> of both dates. </h4> <p id = "output"> </p> <script> let output = document.getElementById("output"); function compareDates( date1, date2 ) { if ( date1.getTime() < date2.getTime() ) { output.innerHTML += date1 + " is behind the " + date2 + " <br/> "; } else if ( date1 > date2 ) { output.innerHTML += date2 + " is behind the " + date1 + " <br/> "; } else { output.innerHTML += date1 + " is same as " + date2 + " <br/> "; } } // calling the function for different expressions output.innerHTML += "<br/>"; let date1 = new Date(); let date2 = new Date(2012, 11, 21); compareDates( date1, date2 ); output.innerHTML += "<br/>"; date2 = new Date(); compareDates( date1, date2 ); </script> </body> </html>
使用 Moment.js diff() 方法比较两个日期
JavaScript 包含各种库；其中之一是 Moment.js，用于管理日期和时间。Moment.js 有一个 diff() 方法，它给出两个日期之间的年、月、日、时、分、秒、毫秒等差异。在我们的例子中，我们可以用秒单位来找出两个日期之间的差异。
在使用 Moment.js 方法之前，请确保包含 Moment.js 或将 CDN 添加到 HTML 代码的标签中。
语法
您可以按照以下语法使用 Moment.js 的 diff() 方法。
let date1 = moment();
let date2 = moment("2024-11-21");
let difference = date1.diff( date2, "seconds" ); // 返回以秒为单位的差值
参数
- date1 和 date2 是我们需要进行比较的两个日期。
- seconds − 这是我们需要差值的时间单位。用户还可以使用分钟、小时等。
示例
在下面的示例中，我们使用 moment() 创建了两个日期对象。我们将 diff() 方法应用于两个对象以比较它们，并根据差值是相同、正还是负在输出中呈现消息。
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment-with-locales.min.js" integrity="sha512-vFABRuf5oGUaztndx4KoAEUVQnOvAIFs59y4tO0DILGWhQiFnFHiR+ZJfxLDyJlXgeut9Z07Svuvm+1Jv89w5g==" crossorigin="anonymous" referrerpolicy="no-referrer"> </script> </head> <body> <h2> Comparing two dates with JavaScript. </h2> <h4> compare two dates using<i> diff() </i> method of Moment.js. </h4> <p id = "output"> </p> <script> let output = document.getElementById("output"); function compareDates(date1, date2) { if ( date1.diff(date2, "seconds") < 0 ) { output.innerHTML += date1.format('yy-MM-DD, HH:mm:ss') + " is behind the " + date2.format('yy-MM-DD, HH:mm:ss') + " <br/> "; } else if ( date1.diff(date2, "seconds") > 0 ) { output.innerHTML += date2.format('yy-MM-DD, HH:mm:ss') + " is behind the " + date1.format('yy-MM-DD, HH:mm:ss') + " <br/> "; } else { output.innerHTML += date1.format('yy-MM-DD, HH:mm:ss') + " is same as " + date2.format('yy-MM-DD, HH:mm:ss') + " <br/> "; } } // calling the function for different expressions output.innerHTML += "<br/>"; let date1 = moment(); let date2 = moment("2024-11-21"); compareDates(date1, date2); output.innerHTML += "<br/>"; date2 = moment(); compareDates(date1, date2); </script> </body> </html>
在本教程的第一部分中，我们使用了默认的 Date() 类来比较日期。此外，我们还使用了 Moment.js 库方法进行比较。Moment 让开发人员可以轻松处理日期。
