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:

<span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span>  
  <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-widget"</span>></span>  
    <span class="hljs-tag"><<span class="hljs-name">p</span>></span> 🌎 Tomorrow's date is  
      <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tomorrow-date"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>   
    <span class="hljs-tag"></<span class="hljs-name">p</span>></span>  
  <span class="hljs-tag"></<span class="hljs-name">section</span>></span>

  <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-widget"</span>></span>  
    <span class="hljs-tag"><<span class="hljs-name">p</span>></span> 🏧 Your subscription ends on   
      <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"subscription-end-date"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>  
    <span class="hljs-tag"></<span class="hljs-name">p</span>></span>  
  <span class="hljs-tag"></<span class="hljs-name">section</span>></span>  
<span class="hljs-tag"></<span class="hljs-name">section</span>></span>

With the following CSS code:

<span class="hljs-selector-tag">body</span>{  
  <span class="hljs-attribute">display</span>: flex;  
  <span class="hljs-attribute">justify-content</span>: center;  
  <span class="hljs-attribute">align-items</span>: center;  
  <span class="hljs-attribute">padding-top</span>: <span class="hljs-number">3rem</span>;  
}

<span class="hljs-selector-class">.container</span>{  
  <span class="hljs-attribute">display</span>: flex;  
  <span class="hljs-attribute">flex-direction</span>: column;  
  <span class="hljs-attribute">justify-content</span>: center;  
  <span class="hljs-attribute">align-items</span>: center;  
  <span class="hljs-attribute">gap</span>: <span class="hljs-number">1rem</span>;  
  <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span> <span class="hljs-number">1rem</span>;  
  <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;  
}

<span class="hljs-selector-class">.date-widget</span>{  
  <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-number">1px</span> <span class="hljs-number">#202040</span>;  
  <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;  
  <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">1rem</span>;  
  <span class="hljs-attribute">width</span>: <span class="hljs-number">90%</span>;  
  <span class="hljs-attribute">height</span>: <span class="hljs-number">5rem</span>;  
  <span class="hljs-attribute">text-align</span>: center;  
}

<span class="hljs-selector-class">.tomorrow-date</span>,  
<span class="hljs-selector-class">.subscription-end-date</span>{  
  <span class="hljs-attribute">font-size</span>: <span class="hljs-number">0.9rem</span>;  
}

<span class="hljs-keyword">@media</span>(min-width: <span class="hljs-number">524px</span>){  
  <span class="hljs-selector-class">.container</span>{  
    <span class="hljs-attribute">flex-direction</span>: row;  
  }

  <span class="hljs-selector-class">.date-widget</span>{  
    <span class="hljs-attribute">width</span>: <span class="hljs-number">40%</span>;  
    <span class="hljs-attribute">height</span>: <span class="hljs-number">3.5rem</span>;  
    <span class="hljs-attribute">text-align</span>: 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:

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

<span class="hljs-keyword">const</span> tomorrow = <span class="hljs-function">() =></span> {  
  <span class="hljs-comment">// Get today's date</span>  
  <span class="hljs-keyword">let</span> today = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();  
  <span class="hljs-comment">// Change the date by adding 1 to it (today + 1 = tomorrow)</span>  
  today.setDate(today.getDate() + <span class="hljs-number">1</span>);  
  <span class="hljs-comment">// return yyyy-mm-dd format</span>  
  <span class="hljs-keyword">return</span> today.toISOString().split(<span class="hljs-string">'T'</span>)[<span class="hljs-number">0</span>];  
};

<span class="hljs-comment">// display the result in the widget span tag</span>  
<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">".tomorrow-date"</span>).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:

<span class="hljs-keyword">const</span> dateOfXDay = <span class="hljs-function">(<span class="hljs-params">xDay = <span class="hljs-number">1</span></span>) =></span> {  
  <span class="hljs-comment">// Get today's date</span>  
  <span class="hljs-keyword">let</span> today = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();  
  <span class="hljs-comment">// Change the date by adding 1 to it (today + 1 = tomorrow)</span>  
  today.setDate(today.getDate() + xDay);  
  <span class="hljs-comment">// return yyyy-mm-dd format</span>  
  <span class="hljs-keyword">return</span> today.toISOString().split(<span class="hljs-string">'T'</span>)[<span class="hljs-number">0</span>];  
};

<span class="hljs-comment">// display the result in the subscription widget span tag</span>  
<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">".subscription-end-date"</span>).innerHTML = dateOfXDay(<span class="hljs-number">365</span>);

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:

<span class="hljs-comment">// display the result in the subscription widget span tag</span>  
<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">".subscription-end-date"</span>).innerHTML = dateOfXDay(<span class="hljs-number">-365</span>)

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