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 inyyyy-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:
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 ๐.