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:
- Compare the start and end dates of each range to see if they overlap.
- 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:
- Find the maximum start date and the minimum end date of the 2 range (by using the Math.max() and Math.min() methods)
- 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.