JavaScript: How to Check if 2 Date Ranges Overlap (2 Ways)

A date range refers to a period of time that is defined by two dates: a start date and an end date. For example, a date range can be defined as January 1, 2023, to January 31, 2023. When developing applications with modern JavaScript, there might be cases where you want to check whether 2 given date ranges overlap or not, such as:

• Booking Systems: When implementing a booking system (hotels, restaurants, etc), it’s essential to ensure that there are no overlapping bookings for the same resource or room.
• Project Management: Project managers need to ensure that 2 tasks do not overlap each other to ensure that tasks are properly sequenced and scheduled.

This article shows you how to check if 2 given date ranges overlap or not in JavaScript. Come along are some practical examples.

What Is The Point?

The steps to do the check:

1. Compare the start and end dates of each range to see if they overlap.
2. If the start date of one range is before the end date of the other range, and vice versa, then the ranges overlap.

To shed light on this approach, we’ll write a bit of code.

Example

In this example, the first date range is from 2023-01-01 to 2023-01-10, and the second one is from 2023-01-12 to 2023-01-15.

const range1Start = new Date('2023-01-01');
const range1End = new Date('2023-01-10');

const range2Start = new Date('2023-01-12');
const range2End = new Date('2023-01-15');

if (range1Start < range2End && range2Start < range1End) {
  console.log("The date ranges overlap.");
} else {
  console.log("The date ranges do not overlap.");
}

Output:

The date ranges do not overlap.

Another Example

In this example, the first date range is from 2023-03-12 to 2024-03-12, and the second one is from 2023-04-20 to 2023-12-30.

const range1Start = new Date('2023-03-12');
const range1End = new Date('2024-03-12');

const range2Start = new Date('2023-04-20');
const range2End = new Date('2023-12-30');

if (range1Start < range2End && range2Start < range1End) {
  console.log("The date ranges overlap.");
} else {
  console.log("The date ranges do not overlap.");
}

Output:

The date ranges overlap.

An Alternative Solution

If you don’t like the technique mentioned above, you can do it like this:

1. Find the maximum start date and the minimum end date of the 2 range (by using the Math.max() and Math.min() methods)
2. If the maximum start date is before the minimum end date, then the 2 date ranges overlap.

For a better understanding, see the sample code below:

const range1Start = new Date('2023-01-01');
const range1End = new Date('2023-01-10');

const range2Start = new Date('2023-01-05');
const range2End = new Date('2023-01-15');

const maxStart = new Date(Math.max(range1Start, range2Start));
const minEnd = new Date(Math.min(range1End, range2End));

if (maxStart < minEnd) {
  console.log("The date ranges overlap.");
} else {
  console.log("The date ranges do not overlap.");
}

Output:

The date ranges overlap.

In general, in terms of complexity and amount of code to write, the 2 techniques in this article are not much different. Just choose from them which one you like more.