There are a few ways to add days to a date in JavaScript. JavaScript offers a variety of Date methods that can be used to add days, months, or years to date.
To add days to a date in JavaScript use the getDate() and setDate() methods from the Date object. First, call the getDate() method from the Date object to get the current day of the month and then add any number of days to it. Finally, call setDate() method with that number to set a new Date.
In this post, I will show you 3 different ways to add days so that you can choose one according to your need.
You can also add hours, minutes, and seconds to a Date in JavaScript. I have a complete guide on this topic.
How to Add Days to Data in JavaScript
We will use some of the Date object methods to add days to a date in JavaScript. Specifically, we need just 2 methods: getDate() and setDate()
Step 1: Create a JavaScript Date object
You need to create a Date object JavaScript by calling the new Date() constructor function. Then we can access those methods on the returned object from this function.
const today = new Date();
Also Read: Factory Function in JavaScript Explained with Examples
Step 2: Get the current day and add any number of days to it
When you call the getDate() method, you will get the day of the month. You will get it as a number. So you can easily add numbers with it.
console.log(today.getDate());
// 5
Here, I am getting 5 as the number of days from the date object. If I want to add 1 day to it, I can do that by adding 1 with 5.
const futureDay = today.getDate() + 1;
console.log(futureDay);
// 6
As you have seen, I am getting the current day using the getDate() method and adding 1 day with it. You can add any number of days here.
Step 3: Set a new day using setDate() method
The setDate() method in JavaScript accepts a number to change the day of the month. After adding a specific number of days to the current day, we will call this method with the updated number.
today.setDate(futureDay);
I am passing the futureDay variable to the setDate() method in this example. So, it will update the day in the today date object.
So, you can use these 2 methods in order to add any number of days to date in JavaScript if you want.
Here is the full code:
const today = new Date();
console.log(today.getDate());
// 5
const futureDay = today.getDate() + 1;
today.setDate(futureDay);
console.log(today.getDate());
// 6
Also Read: Easiest Way to Create Keyboard Shortcuts in JavaScript
How to Add Days to a JavaScript Date With day.js
If you don't want to work with a date in vanilla JavaScript, many external libraries are available. These libraries will give you many methods to manipulate your Date object.
To use any external method, initialize a node project with the following command if you haven't already.
npm init -y
Now, install the library that you want to use for your project. I am installing the day.js library. It is very lightweight and easy to use.
npm install dayjs
This library gives a function to create a Date object. You have to import the function from the dayjs package.
When we call the function, you can pass a date string as its argument to create a specific Date object. Otherwise, this function will use the current date and time to create the object.
const dayjs = require('dayjs');
const date = dayjs('1990-03-14').add(7, 'd');
const formatedDate = date.format('MMMM DD, YYYY');
console.log(formatedDate);
// March 21, 1990
When you call the dayjs() function, you get access to many methods to manipulate your date. For example, there is an add() mehod to add days.
The beauty of this method is that you can use the same method to add any specific amount of time. It might be the day, month, year, hour, minute, second, etc.
The add() method accepts 2 parameters. The first parameter is the amount of time and the second parameter is the type.
To format your Date, you can use the format() method. You have to give a string of tokens to it. This method will format the date according to the token and returns the formatted date string.
Also Read: Best Ways to Create Dynamic HTML Element & CSS in JavaScript
How to Add Days to a JavaScript Date With moment.js
You can also use another Date library called moment.js instead of using day.js in JavaScript. But I always prefer to use day.js in my projects because of its size.
The day.js is very small in size compared to Momentjs. But both provide similar features. But if you want to use the moment.js library, this is how you can add days to a date in JavaScript.
First, install the library with the following command:
npm install moment
You can see this example. It looks the same as the day.js example. The only difference is that now you have to require the function from the moment package.
This function also creates a Date object and gives various properties and methods. It also has add() and format() methods to add any specific amount of time and format the JavaScript date.
const moment = require('moment');
const date = moment('1990-03-14').add(7, 'd');
const formatedDate = date.format('MMMM DD, YYYY');
console.log(formatedDate);
// March 21, 1990
Now you know how to use external libraries to work with dates. One question might come to your mind, which method should you choose?
Which Method Should You Use?
Though JavaScript has a Date() constructor function built into it, it is difficult to manipulate and format a Date.
There are some situations where you can choose vanilla JavaScript and some situations where you should go with external libraries because these libraries will make your life much easier while working with JavaScript Dates.
Vanilla JavaScript: If you need to do basic manipulation and formatting with the Date, you can do this just using pure JavaScript. There is no need to install a full package when you don't use its features.
I would use pure JavaScript for very basic tasks where I don't have to create complex functions for formatting and manipulating the Dates.
External Libraries: When an application needs to work with Dates many times in multiple places with different types of formatting, it would be a good choice to use external libraries.
You can use the same function in different places without repeating yourself. They will provide powerful features that might take a long time and effort to write on your own.
But If you ask which library you should use for your project, I suggest you use the Day.js library. Because It is small in size with all the features and it will not slow down your website like Momentjs.
FAQ
Adding 5 Days to a Date in JavaScript
Instead of adding a single day, you can choose to add multiple days. There is nothing you need to change rather than the number you add to the current day.
const today = new Date();
console.log(today.getDate());
// 13
today.setDate(today.getDate() + 5);
console.log(today.getDate());
// 18
To add 5 days or a week, I am just adding 5 or 7 days with the current day number returned from the getDate() method.
Adding a Month to a Date in JavaScript
I am adding a full month to a date in JavaScript in this example. Therefore, I have to add 30 days. But the question is, after adding 30 days, will the current month change to the next month?
Let's find out.
const today = new Date();
console.log(today.getMonth());
// 4
today.setDate(today.getDate() + 30);
console.log(today.getMonth());
// 5
When you add 30 days to a JavaScript date, the setDate() method also updates the month accordingly. This method can identify when it is necessary to change the month automatically.
For example, if it is 25 March and you add 7 days to it then it will be 1 April. The setDate() method sets the day and adjusts the month by calculating the days.
Adding 3 Months to a Date in JavaScript
In a similar way, you can add multiple months using the setDate() method. For that, you have to convert your months into days.
For example, to add 3 months you have to add 90 days, equivalent to 3 months. But if you want to add months directly, you can use setMonth() and getMonth() methods.
These methods work like setDate() and getDate() methods. The only difference is that they accept and add months instead of days.
const today = new Date();
console.log(today.getMonth());
// 4
today.setDate(today.getDate() + 90);
console.log(today.getMonth());
// 7
const today = new Date();
console.log(today.getMonth());
// 4
today.setMonth(today.getMonth() + 3);
console.log(today.getMonth());
// 7
In the first example, I use the setDate() method where I give 90 days. When I use the setMonth() method, I can give 3 as the month.
Conclusion
It is not very difficult to manipulate and format Dates in JavaScript. You can choose pure JavaScript or some external libraries.
I have shown you both ways to add days to a date in JavaScript. You also know when you should choose which method.
If you think, you need to do a simple task like adding days to a date, you can use the setDate() and getDate() methods. But for complex use cases, you can choose Day.js or Moment.js library.
