Blog Feed

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:

1. "29 August 2024" – "18 September 2024"
2. "3 September 2024" – " 10 September 2024"
3. "3 September 2024" – "18 September 2024"
4. "29 August 2024" – "10 September 2024"
5. "20 August 2024" – "29 August 2024"
6. "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. 1 Sep 2024 – 16 Sep 2024
2. 3 Sep 2024 – 10 Sep 2024
3. 3 Sep 2024 – 16 Sep 2024
4. 1 Sep 2024 – 10 Sep 2024
5. null
6. null

*Well… It was actually a Google Apps Script project, but same-same 😉.

---

The Video

To the video tutorial. 

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.

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

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

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.

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

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

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.

Earth doesn’t perfectly orbit the Sun every 365 days. Rather, it irritatingly must make its orbit in oh, I don’t know, roughly 365.242190 days each year.

Due to this inconsiderate behaviour, we must add a leap year into our common calendar known as the Gregorian Calendar.

Like, I presume, many of us, I thought a leap year occurred every four years.

Whether it was a matter of being taught a half-truth from my school teachers many decades ago in School (possible), or simply not paying attention to said teachers (much much more possible), I was wrong on this account.

So, when is a leap year?

According to the very impressively sounding Royal Museum Greenwich, a leaps year must meet the following conditions:

1. Any year that is a century (e.g. 2000, 2100, 2400, 1900) must be divisible by 400. So 2000 and, 2400 are leap years but 2100 and, 1900 are not.
2. Any other year must be divisible by 4.

Yeap. It’s that first one, I didn’t know about.

So with this in mind, how would we determine if a year is a leap year in JavaScript?

Enter the JavaScript Modulo Operator

To determine if something is divisible by a number we can use the JavaScript modulo operator (%) to determine the remainder. If the remainder is zero we know it is divisible by a number.

So 12%4 would return 0 because 12 divides perfectly into three lots of four. Whereas 7%3 would have one left over.

Got it? Cool.

The Video

The Video Tutorial

Releases  17 Sep 2024

The Code

Let’s now create a function called isLeapYear() that takes a four-digit number for our target year.

Remember our leap years rules.

We need to:

1. Check if the year is divisible by 400 (year%400 == 0)
2. Check if the year is divisible by 4 (year%4 == 0)
   If it is, then:
3. Check if the year isn’t divisible by 100 (year%100 != 0).

Give it a run to see the results.

Why not just use the Date object?

I actually did this in a previous tutorial to get a list of days of the year a particular weekday (e.g. Monday, Tuesday, Wednesday…etc) falls. You can check it out here:

Get the Day of the Year in JavaScript

However, I would say that a purely numerical approach is always going to significantly beat a multi-step constructor approach.

Check out this benchmark example:

Big difference.

 

~Yagi

Sometimes it can be handy to find the day of the year* that a particular date falls on in JavaScript.

Let’s say you want to get the day of the year for Pie Day (14 Mar 2024). Check out the code:

*This tutorial is for the Gregorian Calendar.

Continue reading “Get the Day of the Year in JavaScript”