Vanilla JavaScript get following Monday

In today’s article, I wanted to check something very specific. Imagine we need to know the first upcoming Monday?

This can become tricky because you will need to know if it’s a new month or even a new year.

Luckily there is a pretty easy way to do this.

So first, we’ll build the code based on the day you read this.

Then we will demo an end-of-month/year date.

JavaScript get following Monday from today permalink

Let’s start by defining what today is:

let today = new Date();

Now we can make the wireframe of our function using an ES6 Arrow function.

getNextMonday = (input) => {
  // Do something
  return input;
};

The function is called getNextMonday, and it accepts one input. It then needs to do something with the input and return something.

So how do we go about finding the following Monday?

Let’s modify the input we receive.

input.setDate(input.getDate() + ((8 - input.getDay()) % 7));

What we do here is set a new Date based on whatever the input was.

The input.getDate() will return 23 if you read this on the 23rd of December. Which is a Wednesday (3rd day of the week)

Then add the number of days till a Monday, so in the case of the 23, it would be (23 + (8 - 3) % 7); = 28

Which happens to be a Monday! Yeey 🎉

Then we can return a template literal where we merge the dates.

return `The next Monday is ${String(input.getDate()).padStart(2, '0')}-${String(
  input.getMonth() + 1
).padStart(2, '0')}-${input.getFullYear()}`;

Quite a chunky one, but it fixes the dates by adding leading zeroes to our date using the padStart method.

The full function will then be:

getNextMonday = (input) => {
  input.setDate(input.getDate() + ((8 - input.getDay()) % 7));
  return `The next Monday is ${String(input.getDate()).padStart(
    2,
    '0'
  )}-${String(input.getMonth() + 1).padStart(2, '0')}-${input.getFullYear()}`;
};

Make sure it’s the valid end of month permalink

This worked since 23 + 5 = 28, but what if we go further than the number of days in a month?

Let’s take New Years’ eve 2020, which is on a Thursday, again. The date is now 12-31-2020 (31st of December).

let today = new Date('12-31-2020');

Then if we run our function calculation, the day will be?

(31 + (8 - 4) % 7); = 35

Which is weird, right? There are only 31 days in December. But still, because we are doing these modifications on a Date object, JavaScript understands it needs to count further.

That said, the first Monday from New Year’s eve is:

See the Pen Vanilla JavaScript get following Monday by Chris Bongers (@rebelchris) on CodePen.

P.s. it’s The next Monday is 04-01-2021.

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter