How to compare two dates with JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we will learn to compare two dates with JavaScript. The date is also one of the data types in JavaScript, and most developer works with it while developing applications.

Let’s understand the need to compare the date with a real-life example. Most of you are using the internet data, and the company sends a message like “2 days left for your data pack validity.” Also, users can see the same notification in the application of network provides. This all happens due to the date comparison.

Here, we have two various approaches to make a comparison between the two dates.

Comparing the Total Millisecond of Two Dates

When we create the new date using an object of the Date() class. We use the getTime() method to get time in milliseconds. The getTime() method returns the total number of milliseconds from the 1st Jan 1970, when the Unix epoch started. We can compare the total number of milliseconds and decide whether the date is the same.

Syntax

Users can follow the syntax below to compare the total milliseconds of two dates.

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
}

Example

In the example below, we have implemented the above approach. We have created the two new objects of the Date() class and compared the total number of milliseconds using the if-else statement. Users can see the result of the comparison between various dates in the output.


<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>

Compare two dates using Moment.js diff() method

JavaScript contains various libraries; one of them is Moment.js which is used to manage the date and time. Moment.js has a diff() method, which gives the difference between two dates in years, months, days, hours, minutes, seconds, milliseconds, etc. We can use the second unit in our case to find the difference between the two dates.

Before using the Moment.js methods, make sure to include Moment.js or add CDN to the tag of the HTML code.

Syntax

You can follow the below syntax to use the diff() method of Moment.js.

let date1 = moment();
let date2 = moment("2024-11-21");
let difference = date1.diff( date2, "seconds" ); // returns difference in seconds

Parameters

date1 and date2 is the two date for which we need to make comparisons.
seconds − It is a unit of time in which we need the difference. Users can also use the minutes, hours, etc.

Example

In the example below, we have created the two date objects using the moment(). We have applied the diff() method to two objects to compare them and render the message in the output according to whether the difference is the same, positive, or negative.


<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>

We have used the default Date() class to compare the dates in the first section of the tutorial. Also, we have used the Moment.js library method to make a comparison. The moment makes it easy for the developer to play with the dates.