Vanilla JavaScript: Add or subtract days from date (and more)

In a recent tutorial, we learned how to get and set the month, day, year, and time values ​​of any Date object. The ability to get and set these date values ​​comes in handy in many situations. For example, you can store the date of a special event in a variable. You can also use these methods to display the current date and time or to add or subtract from a period of time.

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

How to add year, month and day to date

You may remember from our other tutorials that JavaScript has methods setFullYear() and getFullYear() that you can use to set and get the current full year for a specific date. Year. You can use methods such as setMonth() and getMonth() to set and get the current month for a specific date. Likewise, you can use the setDate() and getDate() methods to set and get the day of the month.

Let's write a function that adds a year to a date. It will accept the date and year you want to add as its parameters and return the new date.

function addYearsToDate(date, years) {
   let new_date = new Date(date);
   new_date.setFullYear(new_date.getFullYear() + years);

   return new_date;
}

let today = new Date();
let five_years_later = addYearsToDate(today, 5);

// Outputs: Date Wed Jun 07 2023 19:04:56 GMT+0530 (India Standard Time)
console.log(today);

// Outputs: Date Wed Jun 07 2028 19:04:56 GMT+0530 (India Standard Time)
console.log(five_years_later);

The important thing to note here is that using the Date() constructor creates a new Date object, which is assigned to the variable new_date. Simply setting the value of new_date to the given date will cause them all to point to the same Date object.

We will use the same logic to create the addMonthsToDate() function that accepts a date and the number of months to add as parameters and returns the new date.

 function addMonthsToDate(date, months) {
   let new_date = new Date(date);
   new_date.setMonth(new_date.getMonth() + months);

   return new_date;
}

let today = new Date();
let five_months_later = addMonthsToDate(today, 5);
let fifty_months_later = addMonthsToDate(today, 50);

// Outputs: Date Wed Jun 07 2023 19:15:04 GMT+0530 (India Standard Time)
console.log(today);

// Outputs: Date Tue Nov 07 2023 19:15:04 GMT+0530 (India Standard Time)
console.log(five_months_later);

// Outputs: Date Sat Aug 07 2027 19:15:04 GMT+0530 (India Standard Time)
console.log(fifty_months_later); 

As I mentioned in other tutorials, any overflow encountered by the setMonth() method will cause the appropriate number of years to be added to the given date. This is what happens when we add 50 months to the date. It added 4 years and 2 months to our dating date.

Now, let's write a function that adds the given number of days to our specified date and returns a new date:

function addDaysToDate(date, days) {
   let new_date = new Date(date);
   new_date.setDate(new_date.getDate() + days);

   return new_date;
}

let today = new Date();
let five_days_later = addDaysToDate(today, 5);
let thousand_days_later = addDaysToDate(today, 1000);

// Outputs: Date Wed Jun 07 2023 19:29:12 GMT+0530 (India Standard Time)
console.log(today);

// Outputs: Date Wed Jun 07 2023 19:29:12 GMT+0530 (India Standard Time)
console.log(five_days_later);

// Outputs: Date Wed Jun 07 2023 19:29:12 GMT+0530 (India Standard Time)
console.log(thousand_days_later);

Add any time period to our date

We have defined three new functions that allow us to add a year, month or day to a given date in JavaScript. You may want to add some other time period or duration to the date, such as hours, minutes, or seconds. There's no point in writing three more functions for them.

The following functions can be used to add any time period to a specified date:

function addPeriodToDate(date, {years = 0, months = 0, days = 0, hours = 0, minutes = 0, seconds = 0}) {
   let new_date = new Date(date);
   
   new_date.setFullYear(new_date.getFullYear() + years);
   new_date.setMonth(new_date.getMonth() + months);
   new_date.setDate(new_date.getDate() + days);
   new_date.setHours(new_date.getHours() + hours);
   new_date.setMinutes(new_date.getMinutes() + minutes);
   new_date.setSeconds(new_date.getSeconds() + seconds);

   return new_date;
}


let today = new Date();
// Outputs: Date Wed Jun 07 2023 20:18:24 GMT+0530 (India Standard Time)
console.log(today);

let period = {years: 1, months: 2, days: 3};
let new_date = addPeriodToDate(today, period);
// Outputs: Date Sat Aug 10 2024 20:18:24 GMT+0530 (India Standard Time)
console.log(new_date);

period = {years: 4, months: 22};
new_date = addPeriodToDate(today, period);
// Outputs: Date Sat Apr 07 2029 20:18:24 GMT+0530 (India Standard Time)
console.log(new_date);

period = {days: 4, seconds: 22};
new_date = addPeriodToDate(today, period);
// Outputs: Date Sun Jun 11 2023 20:18:46 GMT+0530 (India Standard Time)
console.log(new_date);

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

Subtract any time period from our date

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

period = {years: -1, months: -2, days: -3};
new_date = addPeriodToDate(today, period);

// Outputs: Date Mon Apr 04 2022 20:18:24 GMT+0530 (India Standard Time)
console.log(new_date);

period = {years: -4, months: -22};
new_date = addPeriodToDate(today, period);

// Outputs: Date Mon Aug 07 2017 20:18:24 GMT+0530 (India Standard Time)
console.log(new_date);

period = {days: -4, seconds: -22};
new_date = addPeriodToDate(today, period);

// Outputs: Date Sat Jun 03 2023 20:18:02 GMT+0530 (India Standard Time)
console.log(new_date); 

Final Thoughts

In this tutorial, we learned two different ways to solve the problem of adding and subtracting years, months, days, etc. to dates in JavaScript. If you just want to add or subtract years, you might consider creating a function like addYearsToDate() that simply does this. Another approach is to create a more general addPeriodToDate() function that can handle different time units.

The above is the detailed content of Vanilla JavaScript: Add or subtract days from date (and more). For more information, please follow other related articles on the PHP Chinese website!