JavaScript Compare Dates: From Chaos to Clarity | by Raja MSR | May, 2024 – Beragampengetahuan

let date1 = new Date("2024-01-29T03:34:48.000Z"); // Tue Jan 29 2024 03:34:48 GMT+0000
let date2 = new Date("2024-01-29T15:00:00.000Z"); // Tue Jan 29 2024 15:00:00 GMT+0000
let date1Offset = date1.getTimezoneOffset();      // 0
let date2Offset = date2.getTimezoneOffset();      // 0
// Adjust the dates to the local time zones
date1.setTime(date1.getTime() + date1Offset * 60 * 1000); // Tue Jan 29 2024 09:04:48 GMT+0530
date2.setTime(date2.getTime() + date2Offset * 60 * 1000); // Tue Jan 29 2024 18:00:00 GMT+0900
// Get the new time zone offsets
date1Offset = date1.getTimezoneOffset();        // -330
date2Offset = date2.getTimezoneOffset();        // -540

Date1 is 330 minutes ahead of UTC, so its offset is -330. Date2 is 540 minutes ahead of UTC, so its offset is -540.

You can check which date is earlier or later with symbols like <, >, and ==. For example:

console.log(date1 === date2); // Output: false
console.log(date1 < date2);   // Output: true
console.log(date1 > date2);   // Output: false

As you can see, the dates are not equal, because they have different time zones, even though the UTC is the same.

Comparing dates in JavaScript can be tricky. But don’t worry, some awesome libraries make it easy and fun. You can use them to write dates in natural language, relative time, or custom formats. How cool is that?

Some of the best libraries for date comparison are Moment.js, Day.js, and date-fns. Let’s explore how they work and what they can do for you.

1. Moment.js

Moment.js lets you do amazing things with dates and times in JavaScript. You can easily compare, change, and format them in different ways. For example, you can say things like "today is Monday" or "3 hours ago" or "12/31/2020". To start with Moment.js, you need to install it and import it into your JavaScript project. For example:

// Install Moment.js using npm
npm install moment
// Import Moment.js in your JavaScript file
const moment = require("moment");

Moment.js makes it easy to compare dates. Just create moment objects from whatever you have: date objects, strings, or numbers. Use the moment() function with any arguments or formats you like. For example:

let date1 = new Date("2024-01-29T03:34:48.000Z"); // Tue Jan 29 2024 03:34:48 GMT+0000
let date2 = new Date("2024-01-29T15:00:00.000Z"); // Tue Jan 29 2024 15:00:00 GMT+0000
// Create a moment object from a date object
let moment1 = moment(date1); 
let moment2 = moment(date2);
// Create a moment object from a string in ISO 8601 format
let moment3 = moment("2024-01-29T03:34:48.000Z"); 
let moment4 = moment("2024-01-29T15:00:00.000Z"); 
// Create a moment object from a number in milliseconds
let moment5 = moment(1709286888000); 
let moment6 = moment(1709332800000);

You can do amazing things with Moment.js! You can compare different moments and see which one is earlier, later, or the same as another. You can use simple methods like isBefore(), isAfter(), isSame(), and more. They give you a true or false answer. Here’s an example:

console.log(moment1.isBefore(moment2));       // Output: true
console.log(moment1.isAfter(moment2));        // Output: false
console.log(moment1.isSame(moment2));         // Output: false
console.log(moment1.isSameOrBefore(moment2)); // Output: true
console.log(moment1.isSameOrAfter(moment2));  // Output: false

Look at that! When you compare objects with moment, they use UTC, just like date objects. But maybe you want to compare them with local time, or another time zone. No problem! You can change the time zone of the moment objects with local() or utcOffset().

2. Day.js

Day.js lets you work with dates and times in JavaScript easily and quickly. It is like Moment.js, but smaller and faster. It also has many plugins that add more features and options. For example, you can say things like "today is before yesterday" or "3 hours ago" or "12/31/2020" with Day.js. To use Day.js, you need to download it and add it to your JavaScript project. For example:

// Install Day.js using npm
npm install dayjs
// Import Day.js in your JavaScript file
const dayjs = require("dayjs");

Day.js is awesome for comparing dates! You just need to make dayjs objects from whatever dates you have. You can use the dayjs() function with different inputs and formats. Here’s an example:

let date1 = new Date("2024-01-29T03:34:48.000Z"); 
// Tue Jan 29 2024 03:34:48 GMT+0000
let date2 = new Date("2024-01-29T15:00:00.000Z"); 
// Tue Jan 29 2024 15:00:00 GMT+0000
// Create a dayjs object from a date object
let day1 = dayjs(date1); 
let day2 = dayjs(date2);
// Create a dayjs object from a string in ISO 8601 format
let day3 = dayjs("2024-01-29T03:34:48.000Z"); 
let day4 = dayjs("2024-01-29T15:00:00.000Z");
// Create a dayjs object from a number in milliseconds
let day5 = dayjs(1709286888000); 
let day6 = dayjs(1709332800000);

You can easily compare dayjs objects with Day.js. It has awesome methods like isBefore(), isAfter(), isSame(), and more. They give you a true or false answer. For example:

consol.log(day1.isBefore(day2)); 		// Output: true
consol.log(day1.isAfter(day2)); 		// Output: false
consol.log(day1.isSame(day2)); 			// Output: false
consol.log(day1.isSameOrBefore(day2)); 	// Output: true
consol.log(day1.isSameOrAfter(day2)); 	// Output: false

Dayjs objects and date objects have the same UTC. That’s how we compare them. But sometimes you need a different time zone. No problem! Just use local() or utcOffset() to change the dayjs objects to the time zone you want.

3. Date-fns compare dates

Date-fns is a modern and modular library that lets you do amazing things with dates and times. You can parse, sort dates, and format them in any way you want. You can also use plugins to add more features, like natural language comparisons, relative time, or custom formats.

Using date-fns is easy. Just install it and import it into your project. Here’s how:

// Install date-fns using npm
npm install date-fns
// Import date-fns in your JavaScript file
const { compareAsc, compareDesc, format, 
formatDistance, formatRelative, isAfter, 
isBefore, isEqual, isSameDay, 
isSameMonth, isSameYear } = require("date-fns");

You can compare dates with date-fns in different ways. You can use date objects, strings, or numbers. To make date objects from strings or numbers, use the Date object or parseISO(). For example:

let date1 = new Date("2024-01-29T03:34:48.000Z"); 
// Tue Jan 29 2024 03:34:48 GMT+0000
let date2 = new Date("2024-01-29T15:00:00.000Z"); 
// Tue Jan 29 2024 15:00:00 GMT+0000
let date3 = parseISO("2024-01-29T03:34:48.000Z"); 
// Tue Jan 29 2024 03:34:48 GMT+0000
let date4 = parseISO("2024-01-29T15:00:00.000Z"); 
// Tue Jan 29 2024 15:00:00 GMT+0000
let date5 = parseISO(1709286888000); 
// Tue Jan 29 2024 03:34:48 GMT+0000
let date6 = parseISO(1709332800000); 
// Tue Jan 29 2024 15:00:00 GMT+0000

It has many handy functions like compareAsc(), compareDesc(), isAfter(), isBefore(), isEqual(), and more. They give you a number or a true/false value to show the result. For example:

console.log(compareAsc(date1, date2)); 	// Output: -1
console.log(compareDesc(date1, date2)); // Output: 1
console.log(isAfter(date1, date2)); 	// Output: false
console.log(isBefore(date1, date2)); 	// Output: true
console.log(isEqual(date1, date2)); 	// Output: false
console.log(isSameDay(date1, date2)); 	// Output: true
console.log(isSameMonth(date1, date2)); // Output: true
console.log(isSameYear(date1, date2)); 	// Output: true

You know how date objects use UTC, right? That’s how they compare with each other. But sometimes you need to use local time or another time zone. Don’t worry, you can do that too! Just use utcToZonedTime() or zonedTimeToUtc() to change the date objects to the time zone you want.

In this blog post, you have learned how to compare dates in JavaScript using various methods and libraries. You have seen that comparing dates in JavaScript can be tricky, but also fun and expressive. You have learned how to compare dates without time, with time, by day, in different time zones, using natural language, relative time, or custom formats.

You have also learned how to use some of the most popular and useful libraries for working with dates in JavaScript, such as Moment.js, Day.js, and date-fns.

I hope you had fun reading this blog post and that you feel more confident and excited about comparing dates in JavaScript.