Add Days, Months and Years to a Date in Vanilla JavaScript

While working with dates, programmers often need to change or modify the days, months, or years using different techniques in Vanilla JavaScript. Programmers can use the some methods provided by the date object in JavaScript, namely the setDate(), getDate(), getMonth(), setMonth(), getFullYear() and setFullYear() functions.

The getDate() method gives the current day of the month. Using the method setDate(), programmers can add days, months, or years to the returned day and place a new date. This article will discuss the methods that allow programmers to add days, months, and years in Vanilla JavaScript.

Let us first know what a Date Object in JavaScript is.

JavaScript provides a built-in date object that allows programmers to manipulate the dates and times in their code. It contains multiple properties and techniques which can efficiently manage or modify the dates and time values. Programmers can create a date object with the JavaScript Date() constructor function.

When they call the Date() function, it will return the Date object having some properties and methods. Programmers can use these methods that help them get and set the millisecond, second, minute, hour, day, month, and year, using either local time or UTC.

The Date object must depict the time and date with millisecond accuracy and within a hundred million days before or after 1970, according to the ECMAScript standard.

1. Add day
2. Add week
3. Add month
4. Add year

Add days to the new instance of the Vanilla JavaScript date Object:

function Days(a, b) {
	const demo = new Date(Number(a))
	demo.setDate(a.getDate() + b)
	return demo
}
const a = new Date();
const new_date = Days(a, 2);
console.log(new_date);
document.write('<b>Current date:</b> ' + a);
document.write('<br><b>Add 2 days in current date:</b> ' + new_date);

Output:

Run Code Snippet

Explanation:

In the above code snippet, we used the getDate() method to return the current date of a month from a provided date object. This method returns the day of a month, from 1 to 31 days of a particular month.

Also, we used the setDate() method that fixes the day for that date. The JavaScript setDate() method accepts a zero-based integer for the day and assigns a value for the date. Here, the variables a and b indicate the date and days of the JavaScript date object.

Add a single day to the Vanilla JavaScript date:

Date.prototype.Days = function (a) {
  let demo = new Date(this.valueOf());
  demo.setDate(demo.getDate() + a);
  return demo;
}
let demo = new Date();
console.log(demo.Days(1));
document.write('<b>Current date:</b> ' + demo);
document.write('<br><b>Add 1 days in current date:</b> ' + demo.Days(1));

Output:

Run Code Snippet

Explanation:

Here, we used the setDate() and getDate() methods to modify the date by adding a day.

Add a week to the Vanilla JavaScript date:

Date.prototype.Days = function (a) {
	let demo = new Date(this.valueOf());
	demo.setDate(demo.getDate() + a);
	return demo;
}

let demo = new Date();
console.log(demo.Days(7));

document.write('<b>Current date:</b> ' + demo);
document.write('<br><b>Add 1 week in current date:</b> ' + demo.Days(7));

Output:

Run Code Snippet

Explanation:

It will return a date by adding a week to the JavaScript date object.

Add a month to the Vanilla JavaScript Date Object:

function Months(number_Months, a = new Date()) {
	a.setMonth(a.getMonth() + number_Months);
	return a;
}

const mon = new Date();

document.write('<b>Current date:</b> ' + mon);
//️ Here, we are adding months to another date
document.write('<br><b>Add 3 months in current date:</b> ' + Months(3, mon));

Output:

Run Code Snippet

Explanation:

In the above code snippet, we used the getMonth() method to return the current month of a year from a provided date object. This method returns the month of a year, from 0 to 11 months of that particular year.

Also, we used the setMonth() method that fixes the month for that date. The JavaScript setMonth() method accepts a zero-based integer for the month and assigns a value for the date. Here, we used the user-defined function Months(), which adds three months to the JavaScript date object.

Add a year to the Vanilla JavaScript Date Object:

function addYears(date,n){
	return new Date(date.setFullYear(date.getFullYear() + n));      
 }
date = new Date();
document.write('<b>Current date:</b> ' + date);
document.write('<br><b>Add 1 Year:</b> ' + addYears(date, 1).toString());

date = new Date(2022,11,21);
document.write('<br><b>Add 10 year in ' + date + ':</b> ' + addYears(date, 10).toString());

Output:

Run Code Snippet

Explanation:

The above code snippet gives an output showing the date with the modified year we have provided in the addYears() function. We used the getFullYear() method that returns the year from a given Date object.

Also, we have used the setfullyear() function that sets the specified year using the Date() constructor.

Conclusion:

We hope this article has catered to all the techniques and methods to add days, months, and years to a date in Vanilla JavaScript using the above methods. Programmers use the built-in object called the Date Object in JavaScript for modifying dates.