Sling Academy
Home/JavaScript/JavaScript: How to Check if 2 Date Ranges Overlap (2 Ways)

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

Last updated: March 07, 2023

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.

Next Article: JavaScript: Adding a duration (days, hours) to a Date object

Previous Article: JavaScript: Convert timestamp to date time and vice versa

Series: Date and Time in JavaScript: Basic to Advanced Tutorials

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration