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 📺

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:

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:

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:

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:

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

Useful Links 🔗

• 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:

• Twitter @unclebigbay143
• LinkedIn @unclebigbay

---

---

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

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 🙏.