如何在JavaScript中比较两个日期?
在本教程中,我们将学习如何使用JavaScript比较两个日期。日期也是JavaScript中的数据类型之一,大多数开发人员在开发应用程序时都会使用它。
让我们通过一个现实生活中的例子来理解比较日期的需求。你们大多数人都使用互联网数据,公司会发送类似“您的数据包有效期还剩2天”的消息。用户也可以在网络提供商的应用程序中看到相同的通知。所有这些都是由于日期比较。
这里,我们有两种不同的方法来比较两个日期。
比较两个日期的总毫秒数
当我们使用**Date()**类对象创建新日期时。我们使用**getTime()**方法以毫秒为单位获取时间。**getTime()**方法返回自1970年1月1日Unix纪元开始以来的总毫秒数。我们可以比较总毫秒数,并确定日期是否相同。
语法
用户可以遵循以下语法来比较两个日期的总毫秒数。
let date1 = new Date(); let date2 = new Date(2012, 11, 21); // comparing the dates if ( date1.getTime() < date2.getTime() ) { // date 1 is behind the date2 } else if ( date1 > date2 ) { // date1 is further to date2 } else { // date1 and date2 is same }
示例
在下面的示例中,我们实现了上述方法。我们创建了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" ); // returns difference in 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.js使开发人员更容易处理日期。