Ayodele Samuel Adebayo
Unclebigbay's 🚀 Blog

Follow

Unclebigbay's 🚀 Blog

Follow

How To Get Tomorrow's Date In JavaScript ⏰

Ayodele Samuel Adebayo's photo
Ayodele Samuel Adebayo
·Jul 7, 2022·

4 min read

How To Get Tomorrow's Date In JavaScript ⏰

Photo by Malvestida on Unsplash

Play this article

Table of contents

  • Demo 📺
  • Usecases
  • Step 1 - Creating The Date Widget
  • Step 2 - Getting Tomorrow's Date In JavaScript
  • Step 3 - Getting X Date In JavaScript
  • Wrapping Up 🏁
  • Useful Links 🔗

No one knows what tomorrow holds, but we can figure out what tomorrow's date will be in JavaScript. This article will show you how to programmatically get the date of the next day (tomorrow) or the date of any X days with JavaScript.

Demo 📺

Demo of how to get tomorrow's date in javascript

Codepen here.

Usecases

  • You want to get tomorrow's date
  • You want to notify the user of their subscription end date when you only know the remaining X days
  • You want to display the released date of a product in X days

Step 1 - Creating The Date Widget

Let's say you have this piece of HTML code to display a dashboard widget:

<section class="container">
  <section class="date-widget">
    <p> 🌎 Tomorrow's date is
      <span class="tomorrow-date"></span> 
    </p>
  </section>

  <section class="date-widget">
    <p> 🏧 Your subscription ends on 
      <span class="subscription-end-date"></span>
    </p>
  </section>
</section>

With the following CSS code:

body{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 3rem;
}

.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  width: 100%;
}

.date-widget{
  box-shadow: 0px 0px 0px 1px #202040;
  padding: 10px;
  border-radius: 1rem;
  width: 90%;
  height: 5rem;
  text-align: center;
}

.tomorrow-date,
.subscription-end-date{
  font-size: 0.9rem;
}

@media(min-width: 524px){
  .container{
    flex-direction: row;
  }

  .date-widget{
    width: 40%;
    height: 3.5rem;
    text-align: center;
  }
}

The HTML and CSS code above will produce the following:

how the date widget will look like before displaying the result of tomorrow's date in JavaScript

We'll use JavaScript to target the tomorrow-date and subscription-end-date classes to display their respective dates.

Step 2 - Getting Tomorrow's Date In JavaScript

We'll use the code below to get tomorrow's date:

const tomorrow = () => {
  // Get today's date
  let today = new Date();
  // Change the date by adding 1 to it (today + 1 = tomorrow)
  today.setDate(today.getDate() + 1);
  // return yyyy-mm-dd format
  return today.toISOString().split('T')[0];
};

// display the result in the widget span tag
document.querySelector(".tomorrow-date").innerHTML = tomorrow()

Explanation:

  • We created a function named tomorrow
  • We get the current date using the new Date() constructor
  • Then we used the setDate() function to modify the current date by 1 which is equivalent to tomorrow's date.
  • Finally, we used the toISOString() method to return tomorrow's date in yyyy-mm-dd format.

Our tomorrow's date widget should look something like this:

displaying tomorrow's date in javascript

In this section, you've learned how to get tomorrow's date. Let's take a look at how we can get the date of an X date.

Step 3 - Getting X Date In JavaScript

X date means yesterday, tomorrow, or 365 days to come.

Positive X (i.e 1,2,3) = upcoming days.

Negative X (i.e -1, -2, -3) = past days.

We can implement the breakdown above with the following code:

const dateOfXDay = (xDay = 1) => {
  // Get today's date
  let today = new Date();
  // Change the date by adding 1 to it (today + 1 = tomorrow)
  today.setDate(today.getDate() + xDay);
  // return yyyy-mm-dd format
  return today.toISOString().split('T')[0];
};

// display the result in the subscription widget span tag
document.querySelector(".subscription-end-date").innerHTML = dateOfXDay(365);

The code above is similar to the function used in getting tomorrow's date, except the dateOfXDay() function expects an xDay which represents the number of days you want to receive their date for. If no argument is passed, the function will return the date of tomorrow.

Our subscription date widget should now look something like this:

showing subscription date in javascript

When a negative number is passed as an argument, as shown below:

// display the result in the subscription widget span tag
document.querySelector(".subscription-end-date").innerHTML = dateOfXDay(-365)

The function will return the past days:

showing the dates of past days in javascript

Wrapping Up 🏁

In this tutorial, you've learned how to get the date for tomorrow as well as any X days.

You can find the complete source code of this tutorial on Codepen here

  • Learn more about JavaScript Date object here
  • Learn more about the setDate method here
  • Learn more about the getDate method here

I'm glad you made it to the end of this article. If you enjoyed and learned something new from this article, I'll like to connect with you.

Let's connect on:



See you in the next article. Bye Bye 🙋‍♂️

Buy buy and see you again on Unclebigbay's blog

If you found my content helpful and want to support my blog, you can also buy me a coffee below, my blog lives on coffee 🙏.

Did you find this article valuable?

Support Ayodele Samuel Adebayo by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this