How to Add or Subtract Days (and More) From Dates in Vanilla JavaScript

In our previous tutorial, we learned how to get and set the value for months, days, years, and time for any Date object. The ability to get and set these date values can come in handy in a many situations. For example, you might store the date for special events in a variable. You might also use these methods to display the current date and time or do addition and subtraction of a period of time.

In this tutorial, our focus will be on learning how to add or subtract a period of time such as years, months, days, hours, and minutes etc. from a specified date.

How to Add Years, Months and Days to a Date

You might recall from our other tutorial that JavaScript has methods such as setFullYear() and getFullYear() that you can use to set and get the current full year for a particular date. There are methods such as setMonth() and getMonth() that you can use to set and get the current month for a particular date. Similarly, you can use the setDate() and getDate() methods to set and get the day of the month.

Let’s write a function that will add years to a date. It will accept a date and the number of years that you want to add as its parameters and return the new date.

1

function addYearsToDate(date, years) {

2

   let new_date = new Date(date);

3

   new_date.setFullYear(new_date.getFullYear() + years);

4

5

   return new_date;

6

}

7

8

let today = new Date();

9

let five_years_later = addYearsToDate(today, 5);

10

11

// Outputs: Date Wed Jun 07 2023 19:04:56 GMT+0530 (India Standard Time)

12

console.log(today);

13

14

// Outputs: Date Wed Jun 07 2028 19:04:56 GMT+0530 (India Standard Time)

15

console.log(five_years_later);

The important thing to note here is the use of Date() constructor to create a new Date object that is assigned to the variable new_date. Simply setting the value of new_date to given date would have resulted in would have resulted in both of them pointing to the same Date object.

We will use the same logic to create our addMonthsToDate() function which accepts a date and the number of months that you want to add as its parameters and return the new date.

1

 function addMonthsToDate(date, months) {

2

   let new_date = new Date(date);

3

   new_date.setMonth(new_date.getMonth() + months);

4

5

   return new_date;

6

}

7

8

let today = new Date();

9

let five_months_later = addMonthsToDate(today, 5);

10

let fifty_months_later = addMonthsToDate(today, 50);

11

12

// Outputs: Date Wed Jun 07 2023 19:15:04 GMT+0530 (India Standard Time)

13

console.log(today);

14

15

// Outputs: Date Tue Nov 07 2023 19:15:04 GMT+0530 (India Standard Time)

16

console.log(five_months_later);

17

18

// Outputs: Date Sat Aug 07 2027 19:15:04 GMT+0530 (India Standard Time)

19

console.log(fifty_months_later); 

As I mentioned in the other tutorial, any overflow encountered by the setMonth() method results in addition of an appropriate number of years to the given date. This is what happened when we added 50 months to our date. It basically adds 4 years and 2 months to our date.

Now, let’s write a function that will add given number of days to our specified date and return a new date:

1

function addDaysToDate(date, days) {

2

   let new_date = new Date(date);

3

   new_date.setDate(new_date.getDate() + days);

4

5

   return new_date;

6

}

7

8

let today = new Date();

9

let five_days_later = addDaysToDate(today, 5);

10

let thousand_days_later = addDaysToDate(today, 1000);

11

12

// Outputs: Date Wed Jun 07 2023 19:29:12 GMT+0530 (India Standard Time)

13

console.log(today);

14

15

// Outputs: Date Wed Jun 07 2023 19:29:12 GMT+0530 (India Standard Time)

16

console.log(five_days_later);

17

18

// Outputs: Date Wed Jun 07 2023 19:29:12 GMT+0530 (India Standard Time)

19

console.log(thousand_days_later);

Adding Any Period of Time to Our Date

We have defined three new functions that allow us to add years, months, or days to a given date in JavaScript. You might want to add some other period or duration to your date such as hours, minutes, or seconds. Writing three more functions for them doesn’t make sense.

Here is a function that you can use to add any period of time to your specified date:

1

function addPeriodToDate(date, {years = 0, months = 0, days = 0, hours = 0, minutes = 0, seconds = 0}) {

2

   let new_date = new Date(date);

3

4

   new_date.setFullYear(new_date.getFullYear() + years);

5

   new_date.setMonth(new_date.getMonth() + months);

6

   new_date.setDate(new_date.getDate() + days);

7

   new_date.setHours(new_date.getHours() + hours);

8

   new_date.setMinutes(new_date.getMinutes() + minutes);

9

   new_date.setSeconds(new_date.getSeconds() + seconds);

10

11

   return new_date;

12

}

13

14

15

let today = new Date();

16

// Outputs: Date Wed Jun 07 2023 20:18:24 GMT+0530 (India Standard Time)

17

console.log(today);

18

19

let period = {years: 1, months: 2, days: 3};

20

let new_date = addPeriodToDate(today, period);

21

// Outputs: Date Sat Aug 10 2024 20:18:24 GMT+0530 (India Standard Time)

22

console.log(new_date);

23

24

period = {years: 4, months: 22};

25

new_date = addPeriodToDate(today, period);

26

// Outputs: Date Sat Apr 07 2029 20:18:24 GMT+0530 (India Standard Time)

27

console.log(new_date);

28

29

period = {days: 4, seconds: 22};

30

new_date = addPeriodToDate(today, period);

31

// Outputs: Date Sun Jun 11 2023 20:18:46 GMT+0530 (India Standard Time)

32

console.log(new_date);

As you can see, the above function takes care of any overflow for you. There is also no need to provide values for all units of time as they are set to 0 by default. This means that we could simply pass the number of days and seconds that we want to add while skipping all other values.

Subtracting Any Period of Time From Our Date

We don’t need to write any separate function to subtract an arbitrary period of time from our date. You can use the function from previous section to subtract years, months, days, hours, minutes, or seconds. All that you need to do is provide negative values for the period. Here are some examples:

1

period = {years: -1, months: -2, days: -3};

2

new_date = addPeriodToDate(today, period);

3

4

// Outputs: Date Mon Apr 04 2022 20:18:24 GMT+0530 (India Standard Time)

5

console.log(new_date);

6

7

period = {years: -4, months: -22};

8

new_date = addPeriodToDate(today, period);

9

10

// Outputs: Date Mon Aug 07 2017 20:18:24 GMT+0530 (India Standard Time)

11

console.log(new_date);

12

13

period = {days: -4, seconds: -22};

14

new_date = addPeriodToDate(today, period);

15

16

// Outputs: Date Sat Jun 03 2023 20:18:02 GMT+0530 (India Standard Time)

17

console.log(new_date); 

Final Thoughts

In this tutorial, we learned two different ways to approach the problem of adding and subtracting years, months, days etc. from a date in JavaScript. If you only want to add or subtract years, you can consider creating a function like addYearsToDate() that specifically does this with simplicity. Another approach is the creation of a more versatile addPeriodToDate() function which can handle different units of time.