How do i add years, months, days, hours, minutes or seconds to JavaScript Date object?

Question

I often encountered the situation where I want to add years, months, days, hours, minutes or seconds to a Date object in JavaScript. There are many ways described for each specific "add" (edit: as in add day for example) but I didn't find a complete solution on stackoverflow yet, so I decided to share my approach in Q&A style. My own answer is a way to deal with the problem without using a framework.

---

Other solutions to the Problem suggested in comments and answers:

Frameworks/Libraries dealing with the problem:

moment.js (thanks JonnyIrving/Eugene Mihaylin/Pac0)

https://blog.bitsrc.io/9-javascript-date-time-libraries-for-2018-12d82f37872d (thanks RobG)

fecha.js (thanks RobG)

Examples of specific add topics (thanks Pac0):

Days: Add days to JavaScript Date

Minutes: How to add 30 minutes to a JavaScript Date object?

Hours: Adding hours to Javascript Date object?

Months: JavaScript function to add X months to a date

---

(I will not mark any answer as accepted because in my opinion there are multiple valid ways)

Answer 1

You may not be inclined to introduce a library to solve this problem and I understand sometimes it's better to do it vanilla, but personally, I find that all the headaches of dealing with dates and times in JS become a whole lot easier when you introduce the Moment.js library.

You can take a look at the doc here:https://momentjs.com/docs/#/parsing/date/

Below I have shown what it can do in terms of the adding of units of time but as you will see from the docs it does a whole lot more. It's really good at formatting date objects for example.

moment(new Date());

var nowPlusYear = moment().add(1, 'year');
var nowPlusMonth = moment().add(1, 'month');
var nowPlusMinute = moment().add(1, 'minute');

console.log("In 1 year it will be", nowPlusYear);
console.log("In 1 month it will be", nowPlusMonth);
console.log("In 1 minute it will be", nowPlusMinute);

<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment-with-locales.min.js"></script>

Anyways check it out and see what you think.

Hope this helps!

Answer 2

Try to get out of JS date hell and use the widely used moment.js library :

moment('2018-01-01').add(1, 'day'); 

moment('2018-01-01').add(1, 'hour');

etc...

Answer 3

You can use moment.js

moment('2000-01-01').add(1, 'year');
moment('2000-01-01').add(1, 'month');
moment('2000-01-01').add(1, 'days');
moment('2000-01-01').add(1, 'hour');

or make it manually, like in this answer

Answer 4

My approach is extending the Date.prototype with the following add functionalities:

Date.prototype.addYears = Date.prototype.addYears || function (y, supressSet) {
    if (!supressSet) { this.setFullYear(this.getFullYear() + y); return this; }
    return new Date(this).addYears(y);
};
Date.prototype.addDays = Date.prototype.addDays || function (d, supressSet) {
    return this.addHours(d * 24, supressSet);
};
Date.prototype.addHours = Date.prototype.addHours || function (h, supressSet) {
    return this.addMinutes(h * 60, supressSet);
};
Date.prototype.addMinutes = Date.prototype.addMinutes || function (m, supressSet) {
    return this.addSeconds(m * 60, supressSet);
};
Date.prototype.addSeconds = Date.prototype.addSeconds || function (s, supressSet) {
    return this.addMilliseconds(s * 1000, supressSet);
};
Date.prototype.addMilliseconds = Date.prototype.addMilliseconds || function (ms, supressSet) {
    if (!supressSet) { this.setTime(this.getTime() + ms); return this; }
    return new Date(this).addMilliseconds(ms);
};

The supressSet parameter is optional and makes the respective function work as a getter without changing the object itself. If ommited, it is evaluated to false, which means the original date object will be modified.

As pointed out in comments I missed to take leap years into account. For that I took and adjusted the solution for months from Jazaret:

var DateHelper = {
    isLeapYear: function (year) {
        return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0));
    },
    getDaysInMonth: function (dateinput) {
        return [31, (DateHelper.isLeapYear(dateinput.getFullYear()) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][dateinput.getMonth()];
    }
};

Date.prototype.addMonths = function (m, supressSet) {
    var n = this.getDate(),nDate=new Date(this);
    nDate.setDate(1);
    nDate.setMonth(nDate.getMonth() + m);
    nDate.setDate(Math.min(n, DateHelper.getDaysInMonth(nDate)));
    if (!supressSet) {
        this.setDate(nDate.getDate()); this.setMonth(nDate.getMonth());
    }
    return nDate;
};