DEV Community

David Schinteie
David Schinteie

Posted on

Compare dates in JavaScript

JavaScript compares two dates by considering their year, month, day, hour, minute, second, and millisecond values.

However, if we wish to compare dates only based on their day and disregard their timestamps, we need to adopt a workaround that involves creating new dates with only their year, month, and day components and then comparing them.

A straightforward approach to comparing such dates is by utilizing the differenceInCalendarDays function from the date-fns library.

const datesAreEqual = (dateA: Date, dateB: Date) =>
  differenceInCalendarDays(dateA, dateB) === 0;
Enter fullscreen mode Exit fullscreen mode

An additional option is to utilize the isEqual, parseISO, and startOfDayfunctions from the date-fns library.

const date = "2019-05-30";
const today = startOfDay(new Date());
isEqual(parseISO(date), today);
Enter fullscreen mode Exit fullscreen mode

The isEqual(dateLeft, dateRight) function will compare two dates and return true if they are equal, taking their timestamps into consideration.

The parseISO function will parse a string in ISO format and return a Date object.

The startOfDay function will return the start of a given date with its timestamp set to 0 for hours, minutes, seconds, and milliseconds.

Alternatively, without relying on any external libraries, you can strip the timestamp from a date object using the getFullYear(), getMonth(), and getDate() functions, and compare the resulting dates using the toISOString() method for string comparison.

const getDateAsDay = (someDate: Date) =>
  new Date(someDate.getFullYear(), someDate.getMonth(), someDate.getDate());

const datesAreEqual = (dateA: Date, dateB: Date) =>
  getDateAsDay(dateA).toISOString() === getDateAsDay(dateB).toISOString();

getDateAsDay(new Date("2021-05-10")).toISOString();
//'2021-05-09T21:00:00.000Z'

getDateAsDay(new Date('2021-05-10')).toISOString() === getDateAsDay(new Date('2021-05-10')).toISOString()
//true
Enter fullscreen mode Exit fullscreen mode

Please note that direct comparison of Date objects using strict comparison or non-strict comparison will not work, as it will always result in false. Therefore, an alternate method such as the ones mentioned earlier should be utilized to compare Date objects.

getDateAsDay(new Date("2021-05-10"));
//Mon May 10 2021 00:00:00 GMT+0300 (Eastern European Summer Time)

getDateAsDay(new Date("2021-05-10")) === getDateAsDay(new Date("2021-05-10"));
//false

getDateAsDay(new Date("2021-05-10")) == getDateAsDay(new Date("2021-05-10"));
//false
Enter fullscreen mode Exit fullscreen mode

In conclusion, comparing dates can be a tricky task, especially when it comes to ignoring timestamps. While there are several methods to handle this, it's important to remember that direct comparison of Date objects will not work.

Instead, utilizing functions such as differenceInCalendarDays, isEqual, parseISO, and startOfDay from the date-fns library or stripping the timestamp from a Date object using the getFullYear(), getMonth(), and getDate() functions, and comparing the resulting dates using the toISOString() method, can help achieve accurate date comparisons.

I hope this post has been helpful in clarifying these concepts. If you have any questions or feedback, feel free to leave a comment below.

Thank you for reading!

Top comments (0)