3 Best Ways to Add Days To a Date in JavaScript

Robin
May 13, 2022

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 date in JavaScript, the Date object provides setDate() and getDate() methods. The getDate() method returns the current day of the month. You can add days to the returned day and set the new day using the setDate() method.

In this post, I will show you 3 different ways to add days so that you can choose one according to your need.

3 Ways to Add Days to A JavaScript Date

These are the following methods that you can use in your JavaScript project:

  • Use Vanilla JavaScript: You can use vanilla JavaScript Date methods like setDate() and getDate() to add days to a date object.
  • Use day.js library: Day.js is a library that can create and manipulate dates in JavaScript. Use add() to add any number of days.
  • Use moment.js library: There is another JavaScript library to work with dates. It also has an add() method that can add days to dates.

Let’s discuss all these methods in detail with some examples.

You can also add hours, minutes, and seconds to a Date in JavaScript. I have a complete guide on this topic.

What is JavaScript Date Object?

JavaScript has a built-in date object that allows you to work with dates and times in your code. It has many properties and methods that can manipulate dates and time values.

You can create a date object with the Date() constructor function in JavaScript. When you call this function, it will return an object with some properties and methods.

3 Best Ways to Add Days To a Date in JavaScript

Use Vanilla JavaScript to Add Days to a Date Object

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()

But first, we have to create a JavaScript Date object by calling the new Date() constructor function. Then we can access those methods on the returned object from this function.

const today = new Date();

I have created a date object and stored it in the today variable. Now let’s seen how we can use the getDate() and setDate() methods on it.

Also Read: Factory Function in JavaScript Explained with Examples

Getting Current Day With getDate() Method

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.

const today = new Date();

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 with it, I can do that by adding 1 with 5.

const today = new Date();

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.

In our next step, we have to set the updated days to our date object. That is why we will use the setDate() method.

Also Read: Easiest Way to Create Keyboard Shortcuts in JavaScript

Setting New Day Using setDate() Method

The setDate() method in JavaScript accepts a number to set it as the day to date object. After adding a specific number of days to the current day, we will call this method with the updated number.

const today = new Date();

today.setDate(6);

I am passing 6 to the setDate() method in this example. So, it will update the day in the today date object and set 6 as the new day.

So, you can use these 2 methods in order to add any number of days to date in JavaScript if you want. Let’s see some examples.

Adding 1 Day to Current Date in JavaScript

I will add one day to the current date in this example. You can achieve this by using the following code:

const today = new Date();

console.log(today.getDate());
// 13

today.setDate(today.getDate() + 1);

console.log(today.getDate());
// 14

Here, you can see when I created my date object, it returned 13 as the day. But after adding 1 day and setting it to the object, it returned 14.

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.

How to Format a JavaScript Date

You have learned how to add days to a JavaScript date object until now. It is useless if you can not display them in a proper format.

There are many ways you can format a date in JavaScript. Here I will show you the simplest way to format your Date.

const today = new Date('1990-03-13');

today.setDate(today.getDate() + 7);

const formatedDate = today.toLocaleDateString('en-US', {
    day: 'numeric',
    month: 'long',
    year: 'numeric',
});

console.log(formatedDate);
// March 20, 1990

After adding days to a date, you can format it using the toLocaleDateString() method. This method accepts 2 parameters. The first parameter is a string. It represents the formatting convention that it will follow.

The second parameter is options that allow customizing the behavior of the method. I set day and year as numeric and month as long for my options.

When you call this method with the 2 parameters, it will return a formatted date string.

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

In some cases, an application might need to display a Date in one place. Therefore, I can write some JavaScript code to display it in that place.

But the truth is, most applications need Dates and times in multiple places with different formating. In this situation, writing vanilla JavaScript code is just a waste of time when you can do this very quickly using an external library.

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.

Therefore, I use these libraries instead of vanilla JavaScript most of the time because of the convenience.

But If you ask which library you should use for your project, I suggest you use the Day.js library. It is very small, so it will not slow down your website like Momentjs.

The Day.js library will give all the features you might need for your application. When you use a small package, your website will download less code, leading to a faster page load.

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.

I hope you have learned how to add days to a JavaScript date, and you can use it in your projects.

Thank you so much for reading. Happy coding!

Related Posts