I recently had a project where I had to extract the date range between two sets of overlapping date ranges in JavaScript*.
Let’s say our user wanted to see any overlapping date ranges between "2024-09-01" and "2024-09-16". For the following set of date ranges:
"29 August 2024"–"18 September 2024""3 September 2024"–" 10 September 2024""3 September 2024"–"18 September 2024""29 August 2024"–"10 September 2024""20 August 2024"–"29 August 2024""18 September 2024"–"25 September 2024"
Here’s a more visual example:
In my project, this represented many thousands of ranges to search, but we have a good sample here for testing.
Our expected returned results should only provide overlapping ranges that fit inside the target range, chopping off any excess dates. So the results would look a little like this:
- 1 Sep 2024 – 16 Sep 2024
- 3 Sep 2024 – 10 Sep 2024
- 3 Sep 2024 – 16 Sep 2024
- 1 Sep 2024 – 10 Sep 2024
- null
- null
*Well… It was actually a Google Apps Script project, but same-same 😉.
Table of Contents
The Video
https://youtu.be/GSPiRheS1CE
Releases 24 Sep 2024
The Code
The following code provides a sample set of date ranges called dates that are compared against a target start (tgtStart) and end (tgtEnd) date range.
The script then iterates over the dates running the getDateRangeOverLap() function to compare the currently iterated date ranges against the target ranges.
If there is an overlap, then the overlapping date range is returned. If there is no overlap, then null is returned.
Finally, the script logs the response from the function displaying the current range and the newly updated overlap range, or null.
The different date formats are just to illustrate that any JavaScript date format can be used here.
Go ahead and make a copy of the script and give it a run in your favourite IDE.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
// EXTRACTING OVERLAPPING DATE RANGES BETWEEN TWO RANGES OF DATES IN JAVASCRIPT const dates = [[ "29 August 2024", "18 September 2024" ],[ "3 September 2024", " 10 September 2024" ],[ "3 September 2024", "18 September 2024" ],[ "29 August 2024", "10 September 2024" ],[ "20 August 2024", "29 August 2024" ],[ "18 September 2024", "25 September 2024" ] ] let tgtStart = "2024-09-01" let tgtEnd = "2024-09-16" dates.forEach(dt => { const resp = getDateRangeOverLaps(dt[0], dt[1], tgtStart, tgtEnd) datesResponse = resp? resp.map((date) => date.toDateString()) : "No Matches" console.log("Sample Range:", dt, "\nOverlap Range:", datesResponse) }) /** * Returns the date range overlaps between two sets of text-based date ranges. * @param {String} curStart - Start Date of sample * @param {String} curEnd - End Date of sample * @param {String} tgtStart - Start Date of target * @param {String} tgtEnd - End Date of target * @returns {Date[] | null} */ function getDateRangeOverLaps(curStart, curEnd, tgtStart, tgtEnd){ curStart = new Date(curStart) curEnd = new Date(curEnd) tgtStart = new Date(tgtStart) tgtEnd = new Date(tgtEnd) const curStart_epoch = curStart.getTime() const curEnd_epoch = curEnd.getTime() const tgtStart_epoch = tgtStart.getTime() const tgtEnd_epoch = tgtEnd.getTime() if(curStart_epoch >= tgtEnd_epoch || curEnd_epoch <= tgtStart_epoch){ return null } if(curStart_epoch <= tgtStart_epoch && curEnd_epoch >= tgtEnd_epoch){ return [tgtStart, tgtEnd] } if(curStart_epoch >= tgtStart_epoch && curEnd_epoch <= tgtEnd_epoch){ return [curStart, curEnd] } if(curStart_epoch <= tgtStart_epoch && curEnd_epoch <= tgtEnd_epoch){ return [tgtStart, curEnd] } if(curStart_epoch >= tgtStart_epoch && curEnd_epoch >= tgtEnd_epoch){ return [curStart, tgtEnd] } } |
getDateRangeOverLaps()
Get dates and Dates in milliseconds
Lines 40-49
Our first task is to convert the strings of dates into a proper JavaScirpt Date object format.
We also need to convert this date to a time in milliseconds since the epoch (1970-01-01) with the getTime() method.
Next, we need to check any possible overlap conditions.
Check for no Date Range Overlaps
|
1 2 3 |
if(curStart_epoch > tgtEnd_epoch || curEnd_epoch < tgtStart_epoch){ return null } |
It is faster for the function to check if there are no overlapping dates between our current date range and our target range rather than to work through the nuances of the different overlap updates we need to do.
Here we check if our current range start epoch is greater than the target end epoch or if the current end epoch is less than the target start epoch. If either of these conditions are met, we return null.
Otherwise, we can run through the other conditions below.
Check if the Current date range encompasses the entire target date range
|
1 2 3 |
if(curStart_epoch <= tgtStart_epoch && curEnd_epoch >= tgtEnd_epoch){ return [tgtStart, tgtEnd] } |
In this situation, the current date range starts before the target date and ends after the target date. In this case, the overlapping range will be the same as the target date.
Check if the current start and end range fit inside the target range.
|
1 2 3 |
if(curStart_epoch > tgtStart_epoch && curEnd_epoch < tgtEnd_epoch){ return [curStart, curEnd] } |
Here, we have a current date range that starts after the target date range and ends before the target date range.
We have a match and that matching date will be the range of the current date so that is what we will return.
Check if the Current date ranges End within the target date
|
1 2 3 |
if(curStart_epoch <= tgtStart_epoch && curEnd_epoch < tgtEnd_epoch){ return [tgtStart, curEnd] } |
In this condition, we check if the current date range starts before the target range but also ends before the target range. In this case, we return the target start date and the current end date.
Check if the current date range starts within the target date
|
1 2 3 4 |
if(curStart_epoch > tgtStart_epoch && curEnd_epoch >= tgtEnd_epoch){ return [curStart, tgtEnd] } } |
For the final condition check we determine if the current range starts within the target range but ends after the target range. If this condition is met, then we return the current start range and the target end range.
That’s all there is to it.
I’d love to hear how you applied this or tweaked it for your own projects.
~Yagi.