Using JavaScript to Compare Dates

We can use JavaScript to compare dates using the getTime() method. The JavaScript getTime() method converts dates into the number of milliseconds since January 1st, 1970.

var date1 = new Date('2019-01-01');
var date2 = new Date('2020-01-01');

if (date1.getTime() < date2.getTime()) {
   console.log("date2 is after date1");
} else {
   console.log("date1 is after date1");
}

// This will output to the log "date2 is after date1"

Comparing dates in JavaScript is easy. We can use the JavaScript getTime() method to convert the dates into milliseconds, and then compare the milliseconds to each other to determine which is greater.

Then we can just use regular comparison operators like < and > to compare the dates.

The getTime() method returns the number of milliseconds since January 1, 1970. If a date is before this time, a negative number will be returned. Let’s look at some quick examples.

var date1 = new Date('2019-01-01');
var date2 = new Date('2030-01-20');
var date3 = new Date('1970-01-01');
var date4 = new Date('1970-01-02');
var date5 = new Date('1950-09-14');
var result1 = date1.getTime();
var result2 = date2.getTime();
var result3 = date3.getTime();
var result4 = date4.getTime();
var result5 = date5.getTime();

Which would result in the following:

result1 = 1546300800000;
result2 = 1895097600000;
result3 = 0;
result4 = 86400000;
result5 = -609033600000;

To see if one date is after another, we just need to compare them in an if conditional statement.

var date1 = new Date('2019-01-01');
var date2 = new Date('2030-01-20');

var result1 = date1.getTime(); // 1546300800000
var result2 = date2.getTime(); // 1895097600000

if (result1 > result2) {
   console.log("date1 is after date2");
} ekse if (result1 < result2) (
   console.log("date2 is after date1");
)

// This will log "date2 is after date1" because 1546300800000 is less than 1895097600000

An Example of Using JavaScript to Compare Two Dates

When working with a web page, sometimes we need to compare dates to some time in the future and change the content on the web page based on what time it is.

In this example, let’s create a script that compares the current time to a time set 1 minute in the future.

Then, every 10 seconds, using the JavaScript setInterval() method, we will compare the current time to the time set 1 minute in the future. At each checkpoint, we will add content to a div.

Once the current time passes the 1 minute mark, we will let the user know with new text. Here is the HTML:

<style>.red-color span { color: red; } .green-color span { color: green; }</style>
<div id="div1">
  <div>The current date and time is: <span id="currDateTime"></span></div>
  <div>We will check every 10 seconds to see if it is past <span id="newDateTime"></span>.</div>
</div>
<div id="click-me" onclick="stopScript()">Stop script</div>

The first step is to get a time 1 minute in the future, and show the user this time by adding text to the span tags using JavaScript above.

To create the time 1 minute in the future, we convert the current time into milliseconds using the getTime() method, then add 60000 milliseconds to it. Then, for display purposes, we convert it back to a date using the JavaScript new Date() method.

Next, we will set up the JavaScript code to check every 10 seconds if we have passed the 1 minute mark since page load. We can use the innerHTML() method to keep the user updated.

Every 10 seconds, the script will insert an element in the div giving the current time.

If the current time is less than the new time we created (1 minute in the future) we will highlight the text in red. Once one minute has passed, the update will highlight the text with the color green.

To display the dates in a more user-friendly format, we will use the JavaScript toLocaleString() method.

Finally, we also include an option for the user to end the updates by clicking a button that will call the clearInterval() method to kill the script.

Here is the Javascript code:

//Here we will create the current date and time, the new date and time, and fill the span divs in the html.
var currDate = new Date();
document.getElementById("currDateTime").textContent = currDate.toLocaleString('en-US', { dateStyle: 'full', timeStyle: 'long'});
var dateConversion = currDate.getTime();
var futureDateInTime = dateConversion + 60000;
var futureDate = new Date(futureDateInTime);
document.getElementById("newDateTime").textContent = (futureDate.toLocaleString('en-US', { dateStyle: 'full', timeStyle: 'long'}));
//We create a function that will run every 10 seconds
var runningInterval = setInterval(function () {
  //Create a new date and compare it to the future date we created earlier (futureDateInTime)
  var newCurrDate = new Date();
  var newCurrConversion = newCurrDate.getTime();
  var newCurrDateFormatted = newCurrDate.toLocaleString('en-US', { dateStyle: 'full', timeStyle: 'long'});
  var futureDateFormatted = futureDate.toLocaleString('en-US', { dateStyle: 'full', timeStyle: 'long'});
  //We will compare times and change text/styles based on the results
  if( newCurrConversion > futureDateInTime ){
    //The newly created time is after the set time
    document.getElementById("div1").innerHTML = document.getElementById("div1").innerHTML + ('<div class="new-update green-color">The current time is ' + newCurrDateFormatted + ' which is <span>AFTER</span> ' + futureDateFormatted + '</div>');
  } else {
    document.getElementById("div1").innerHTML = document.getElementById("div1").innerHTML + ('<div class="new-update red-color">The current time is ' + newCurrDateFormatted + ' which is </span>BEFORE</span> ' + futureDateFormatted + '</div>');
  }
}, 10000);

function stopScript(){
  clearInterval(runningInterval);
  document.getElementById("div1").innerHTML = document.getElementById("div1").innerHTML + ('<div class="new-update">Stopped. No more times will be displayed.</div>');
}

The final code and output for this example is below:

Code Output:

Full Code:

<style>.red-color span { color: red;} .green-color span { color: green;}</style>
<div id="div1">
  <div>The current date and time is: <b><span id="currDateTime"></span></b></div>
  <div>We will check every 10 seconds to see if it is past <b><span id="newDateTime"></span></b>.</div>
</div>
<br>
<div id="click-me" onclick="stopScript()">Stop script</div>

<script>

var currDate = new Date();
document.getElementById("currDateTime").textContent = currDate.toLocaleString('en-US', { dateStyle: 'full', timeStyle: 'long'});
var dateConversion = currDate.getTime();
var futureDateInTime = dateConversion + 60000;
var futureDate = new Date(futureDateInTime);
document.getElementById("newDateTime").textContent = (futureDate.toLocaleString('en-US', { dateStyle: 'full', timeStyle: 'long'}));
var runningInterval = setInterval(function () {
  var newCurrDate = new Date();
  var newCurrConversion = newCurrDate.getTime();
  var newCurrDateFormatted = newCurrDate.toLocaleString('en-US', { dateStyle: 'full', timeStyle: 'long'});
  var futureDateFormatted = futureDate.toLocaleString('en-US', { dateStyle: 'full', timeStyle: 'long'});
  if( newCurrConversion > futureDateInTime ){
    document.getElementById("div1").innerHTML = document.getElementById("div1").innerHTML + ('<div class="new-update green-color">The current time is ' + newCurrDateFormatted + ' which is <span>AFTER</span> ' + futureDateFormatted + '</div>');
  } else {
    document.getElementById("div1").innerHTML = document.getElementById("div1").innerHTML + ('<div class="new-update red-color">The current time is ' + newCurrDateFormatted + ' which is <span>BEFORE</span> ' + futureDateFormatted + '</div>');
  }
}, 10000);

function stopScript(){
  clearInterval(runningInterval);
  document.getElementById("div1").innerHTML = document.getElementById("div1").innerHTML + ('<div class="new-update">Stopped. No more times will be displayed.</div>');
}

</script>

Hopefully this article has been useful in helping you understand how to use JavaScript to Compare Dates.