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 very tricky because you will need to know if it's a new month or even a new year.

Luckily there is a quite easy way to do this.

So first we'll build the code based on whatever day it is you are reading this.

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

JavaScript get following Monday from today

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 next 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 are reading 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()}`;
};

Making sure it's the valid end of month

Now, 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 Years eve is:

https://codepen.io/rebelchris/pen/qBajZwR

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

Thank you for reading, and let's connect!

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

Vanilla JavaScript get following Monday

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

JavaScript get following Monday from today

Making sure it's the valid end of month

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

JavaScript get following Monday from today

Making sure it's the valid end of month

Thank you for reading, and let's connect!