How to compare dates in JavaScript? [SOLVED]


Written by - Olorunfemi Akinlua
Reviewed by - Deepak Prasad

When working with JavaScript, it's common to encounter situations where you need to compare dates. This can be a bit tricky, as dates in JavaScript are represented by objects rather than primitive values. In this article, we'll explore several methods for comparing dates in JavaScript.

In JavaScript, you can create a new date by calling the Date() constructor. For example:

const date1 = new Date('2023-03-01');
const date2 = new Date('2022-10-31');

This creates two date objects, one for March 1st, 2023 and one for October 31st, 2022.

 

Before comparing times

Before we dive into comparing dates, it's important to understand that JavaScript stores dates as the number of milliseconds since January 1st, 1970. This means that when you create a new date object, you're also creating an object with a time component. If you don't set the time component, it will default to midnight (00:00:00).

Note that when comparing dates, it is important to ensure that they are both in the same time zone, otherwise the comparison may not be accurate.

 

Using comparison operators

One way to compare dates is to use comparison operators like < and >. The comparison operators can be used to compare two dates. When two date objects are compared using these operators, they are compared based on their numeric value, which is the number of milliseconds between the dates.

Here is an example of using comparison operators to execute date comparison

const date1 = new Date("2023-03-01");
const date2 = new Date("2022-10-31");

if (date1 > date2) {
    console.log("Deploy App");
} else {
    console.log("Waiting on resources");
}

Output

Deploy App

In this example, we're checking if date1 is greater than date2, and since it is, it logs "Deploy App".

 

Using the getTime() method

Another way to compare dates is to use the getTime() method. This method returns the number of milliseconds since January 1st, 1970 for a given date object.

const date1 = new Date("2023-03-01");
const date2 = new Date("2022-10-31");

if (date1.getTime() > date2.getTime()) {
    console.log("First Date is greater. Wow");
}

Output

First Date is greater. Wow

In this example, we're checking if the number of milliseconds since January 1st, 1970 for date1 is greater than the number of milliseconds since January 1st, 1970 for date2.

Here's another example

const date1 = new Date("2023-01-01");
const date2 = new Date("2023-01-01");

if (date1.getTime() === date2.getTime()) {
    console.log("Equal");
}

Output

Equal

In this example, we're checking if the number of milliseconds since January 1st, 1970 for date1 is equal to the number of milliseconds since January 1st, 1970 for date2.

 

Using the valueOf() method

The valueOf() method is similar to the getTime() method, but it returns the primitive value of a date object. So, the valueOf() method returns the primitive value of a Date object as the number of milliseconds since January 1, 1970, 00:00:00 UTC. This method can also be used to compare two dates. Let’s illustrate this with some code

const date1 = new Date("2023-03-01");
const date2 = new Date("2022-10-31");

if (date1.valueOf() > date2.valueOf()) {
    console.log("Launch Day is Here");
}

Output

Launch Day is Here

In this example, we're checking if the primitive value of date1 is greater than the primitive value of date2.

 

Using the getTime() method and the Math.sign() method

If you need to compare dates and determine whether one is before or after another, you can use the getTime() method in combination with the Math.sign() method. The Math.sign() method returns the sign of a number, indicating whether the number is positive, negative, or zero. By subtracting the getTime() values of the two dates and passing the result to the Math.sign() method, we can determine which date is greater.

Here is an example of how to use getTime() and Math.sign() method to compare dates.

const date1 = new Date("2023-03-01");
const date2 = new Date("2022-10-31");

const difference = Math.sign(date1.getTime() - date2.getTime());

if (difference === 1) {
    console.log("Day is past");
} else if (difference === -1) {
    console.log("Day is gone");
} else {
    console.log("Day is here");
}

Output

Day is past

In this example, we're using the Math.sign() method to determine whether date1 is after (difference === 1) or before (difference === -1) date2.

 

Using toLocaleTimeString() Method

In JavaScript, the toLocaleTimeString() method is used to get the time portion of a Date object as a string, using the locale conventions of the execution environment.

When comparing two Date objects using toLocaleTimeString(), the strings obtained from each object's toLocaleTimeString() method are compared according to a lexicographical (dictionary) order. This means that the comparison is done character by character, starting from the leftmost character in each string, until a difference is found.

For example, suppose we have two Date objects, date1 and date2, with the following values:

const date1 = new Date('2023-03-13T09:30:00');
const date2 = new Date('2023-03-13T10:15:00');

If we compare these two dates using toLocaleTimeString(), like this:

const time1 = date1.toLocaleTimeString();
const time2 = date2.toLocaleTimeString();

if (time1 < time2) {
  console.log('date1 is earlier than date2');
} else if (time1 > time2) {
  console.log('date1 is later than date2');
} else {
  console.log('date1 and date2 have the same time');
}

The output will be:

date1 is earlier than date2

This is because the time string obtained from date1 is '9:30:00 AM', while the time string obtained from date2 is '10:15:00 AM'. When comparing these strings, the first character in '9' is less than the first character in '10', so the comparison concludes that date1 is earlier than date2.

 

Summary

Here's a summary of all the possible methods for comparing dates in JavaScript:

  • getTime(): Returns the number of milliseconds since January 1, 1970, which can be used to compare two dates.
  • <, >, <=, >=: Comparison operators can be used to compare two Date objects.
  • valueOf(): Returns the primitive value of a Date object, which is the same as calling getTime().
  • toDateString(): Returns a string representation of the date, without the time component.
  • toISOString(): Returns a string representation of the date in ISO format.
  • toJSON(): Returns a string representation of the date in JSON format.
  • toLocaleDateString(): Returns a string representation of the date in the local time zone, without the time component.
  • toLocaleString(): Returns a string representation of the date and time in the local time zone.
  • toLocaleTimeString(): Returns a string representation of the time in the local time zone, without the date component.
  • toString(): Returns a string representation of the date and time, including the time zone.
  • UTC(): Returns the number of milliseconds since January 1, 1970, in UTC time zone.
  • toUTCString(): Returns a string representation of the date and time in UTC time zone.

These methods can be used to compare dates in different formats and time zones, and to represent dates in various string formats.

 

References

Date - JavaScript | MDN (mozilla.org)
Math.sign() - JavaScript | MDN (mozilla.org)
Compare two dates with JavaScript - Stack Overflow

 

Olorunfemi Akinlua

He is boasting over five years of experience in JavaScript, specializing in technical content writing and UX design. With a keen focus on programming languages, he crafts compelling content and designs user-friendly interfaces to enhance digital experiences across various domains. You can connect with him on LinkedIn.

Can't find what you're searching for? Let us assist you.

Enter your query below, and we'll provide instant results tailored to your needs.

If my articles on GoLinuxCloud has helped you, kindly consider buying me a coffee as a token of appreciation.

Buy GoLinuxCloud a Coffee

For any other feedbacks or questions you can send mail to admin@golinuxcloud.com

Thank You for your support!!

Leave a Comment