534

It amazes me that JavaScript's Date object does not implement an add function of any kind.

I simply want a function that can do this:

var now = Date.now();
var fourHoursLater = now.addHours(4);

function Date.prototype.addHours(h) {

   // How do I implement this?

}

I would simply like some pointers in a direction.

  • Do I need to do string parsing?

  • Can I use setTime?

  • How about milliseconds?

Like this:

new Date(milliseconds + 4*3600*1000 /* 4 hours in ms */)?

This seems really hackish though - and does it even work?

Alexander Abakumov
  • 12,301
  • 14
  • 79
  • 125
Jeff Meatball Yang
  • 35,999
  • 26
  • 90
  • 121

19 Answers19

582

JavaScript itself has terrible Date/Time API's. Nonetheless, you can do this in pure JavaScript:

Date.prototype.addHours = function(h) {
  this.setTime(this.getTime() + (h*60*60*1000));
  return this;
}
Mark Amery
  • 127,031
  • 74
  • 384
  • 431
Jason Harwig
  • 40,367
  • 5
  • 42
  • 44
  • 1
    if per say you were adding an hour causing it to roll over to the next day, would this catch it and increment everything properly (day month year)? – cdoern May 14 '20 at 16:40
  • 1
    @cdoern I think it would, since getTime() will return milliseconds and you just adding more milliseconds to that – The1993 Jun 03 '20 at 07:21
402
Date.prototype.addHours= function(h){
    this.setHours(this.getHours()+h);
    return this;
}

Test:

alert(new Date().addHours(4));
kennebec
  • 98,993
  • 30
  • 103
  • 125
  • 26
    I don't think this works---test it on something with hour 23, for example? Jason Harwig's answer is what came to mind for me. – Domenic Oct 25 '10 at 16:08
  • 16
    It's bad practise to add things to an object prototype in Javascript, and Domenic is correct, this doesn't work. Jason Harwig's solution below is better. – iKode Jul 06 '12 at 12:43
  • 20
    @Domenic This works fine with 23:00, tested inside the JavaScript console of Firefox 10, Chrome 21 and IE 8/9 Here the code I've used to test: `var date = new Date(2012, 10, 22, 23, 0, 1); date.toString(); // Thu Nov 22 2012 23:00:01 GMT+0100 (CET) date.setHours(date.getHours() + 1); date.toString(); // Fri Nov 23 2012 00:00:01 GMT+0100 (CET)` It also works fine with setMinutes() – tanguy_k Nov 22 '12 at 00:19
  • 5
    Ran into issues with this solution - Incrementing by 1 failed for me at DST changeover point (move clock forward an hour). – andrewb Oct 02 '15 at 02:09
  • 2
    Also got bitten by this -- I was looping through hours by using setHours(getHours-1): now, at first DST hour, this ends up being an infinite loop. So, check the result! – cfstras Mar 14 '16 at 12:57
  • Fails for me at the boundary where my locale (the United Kingdom) *exits* daylight savings time (though it works fine in the other direction, curiously). In Chrome, if I have `d=new Date('Sun Oct 27 2019 01:59:00 GMT+0100 (British Summer Time)')` and do `d.setHours(d.getHours() + 1)`, then `d` becomes *Sun Oct 27 2019 02:59:00 GMT+0000 (Greenwich Mean Time)*, which is actually 2 hours later, not 1 hour. – Mark Amery Sep 22 '19 at 16:58
287

The below code will add 4 hours to a date (example, today's date):

var today = new Date();
today.setHours(today.getHours() + 4);

It will not cause an error if you try to add 4 to 23 (see the documentation):

If a parameter you specify is outside of the expected range, setHours() attempts to update the date information in the Date object accordingly

Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
SuperNova
  • 21,204
  • 6
  • 80
  • 55
  • This doesnt seem to work when the hours is a decimal (not an integer) – gregmagdits Aug 16 '16 at 21:28
  • 13
    While using hour values >23 doesn't break this, it's nonetheless [broken at daylight savings boundaries](https://stackoverflow.com/questions/1050720/adding-hours-to-javascript-date-object#comment102500929_1051641). Given it's broken, there's no reason to use it; prefer `setTime` or `setUTCHour`. – Mark Amery Sep 22 '19 at 17:01
44

It is probably better to make the addHours method immutable by returning a copy of the Date object rather than mutating its parameter.

Date.prototype.addHours= function(h){
    var copiedDate = new Date(this.getTime());
    copiedDate.setHours(copiedDate.getHours()+h);
    return copiedDate;
}

This way you can chain a bunch of method calls without worrying about state.

Tahir Hassan
  • 5,489
  • 5
  • 42
  • 63
  • This function has same problems as stated out here http://stackoverflow.com/questions/1050720/adding-hours-to-javascript-date-object#comment4305695_1051641 It's not really about whether it works on certain browsers, but other places that use Javascript see this as an issue. combing your solution with this one http://stackoverflow.com/a/1050782/295535 appears to be the best solution – Ressu Dec 10 '12 at 06:55
  • 1
    You should consider changing the function name, as the word `add*` is commonly used to mutate the object itself. – mr5 May 11 '17 at 03:47
  • @mr5 - not sure about that, `add` is used in the .NET framework `DateTime` class a lot, and has the same meaning as the `+` (plus) in Math. – Tahir Hassan May 12 '17 at 08:43
  • 1
    `currentDate.addHours(1)` – mr5 May 12 '17 at 09:04
  • Normally you would assign the "changed" value to a new variable, e.g. `var futureDate = currentDate.addHours(1)`, this way you have access the to the original value of `currentDate` and you have a new variable for the new date. This is a modern pattern, part of the recent functional programming trend. – Tahir Hassan May 12 '17 at 14:56
  • 1
    @TahirHassan nothing to do with the technical details but on choosing the right word to use for function name. I still prefer the mutable version when the function is prefixed with `add` – mr5 May 26 '17 at 07:56
34

The version suggested by kennebec will fail when changing to or from DST, since it is the hour number that is set.

this.setUTCHours(this.getUTCHours()+h);

will add h hours to this independent of time system peculiarities.

Jason Harwig's method works as well.

Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
petter
  • 1,563
  • 18
  • 21
  • I implemented a variation of this that includes minutes, I wonder WHY `.setHours` wouldn't work, as DST only affects the hour anyways... – Eduardo06sp Mar 02 '22 at 06:21
25

Get a date exactly two hours from now, in one line.

You need to pass milliseconds to new Date.

let expiryDate = new Date(new Date().setHours(new Date().getHours() + 2));

        or

let expiryDate2 = new Date(Date.now() + 2 * (60 * 60 * 1000) );

let nowDate = new Date();
let expiryDate = new Date(new Date().setHours(new Date().getHours() + 2));
let expiryDate2 = new Date(Date.now() + 2 * (60 * 60 * 1000) );

console.log('now', nowDate);
console.log('expiry', expiryDate);
console.log('expiry 2', expiryDate2);
Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
james ace
  • 1,693
  • 18
  • 10
24

You can use the Moment.js library.

var moment = require('moment');
foo = new moment(something).add(10, 'm').toDate();
Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
Cmag
  • 13,900
  • 25
  • 83
  • 135
10

I also think the original object should not be modified. So to save future manpower here's a combined solution based on Jason Harwig's and Tahir Hasan answers:

Date.prototype.addHours= function(h){
    var copiedDate = new Date();
    copiedDate.setTime(this.getTime() + (h*60*60*1000)); 
    return copiedDate;
}
Community
  • 1
  • 1
Edward Olamisan
  • 772
  • 1
  • 15
  • 27
8

If you would like to do it in a more functional way (immutability) I would return a new date object instead of modifying the existing and I wouldn't alter the prototype but create a standalone function. Here is the example:

//JS
function addHoursToDate(date, hours) {
  return new Date(new Date(date).setHours(date.getHours() + hours));
}

//TS
function addHoursToDate(date: Date, hours: number): Date {
  return new Date(new Date(date).setHours(date.getHours() + hours));
}

let myDate = new Date();

console.log(myDate)
console.log(addHoursToDate(myDate,2))
Patronaut
  • 810
  • 9
  • 12
  • 1
    Just a clarification: The `new Date(date)` is important because function `setHours()` would modify the original `date` object, thus having a side effect outside the scope of this function, which is against the principles of immutability. – Patronaut Dec 01 '20 at 11:26
5

There is an add in the Datejs library.

And here are the JavaScript date methods. kennebec wisely mentioned getHours() and setHours();

Nosredna
  • 78,682
  • 15
  • 92
  • 122
4

Check if it’s not already defined. Otherwise, define it in the Date prototype:

if (!Date.prototype.addHours) {
    Date.prototype.addHours = function(h) {
        this.setHours(this.getHours() + h);
        return this;
    };
}
Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
Mikael Engver
  • 4,378
  • 4
  • 43
  • 52
3

Another way to handle this is to convert the date to unixtime (epoch), then add the equivalent in (milli)seconds, then convert it back. This way you can handle day and month transitions, like adding 4 hours to 21, which should result in the next day, 01:00.

SPRBRN
  • 2,312
  • 4
  • 33
  • 48
  • You're right - but you're also a couple of years late. [Jason Harwig's answer](https://stackoverflow.com/a/1050782/1709587) showed this method 2 years before you; this answer adds nothing new. – Mark Amery Sep 22 '19 at 17:15
3

This is an easy way to get an incremented or decremented data value.

const date = new Date()
const inc = 1000 * 60 * 60 // an hour
const dec = (1000 * 60 * 60) * -1 // an hour

const _date = new Date(date)
return new Date(_date.getTime() + inc)
return new Date(_date.getTime() + dec)
Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
2

I think this should do the trick

 var nextHour  = Date.now() + 1000 * 60 * 60;
1

For a simple add/subtract hour/minute function in JavaScript, try this:

function getTime (addHour, addMin){
    addHour = (addHour ? addHour : 0);
    addMin = (addMin ? addMin : 0);
    var time = new Date(new Date().getTime());
    var AM = true;
    var ndble = 0;
    var hours, newHour, overHour, newMin, overMin;

    // Change form 24 to 12 hour clock
    if(time.getHours() >= 13){
        hours = time.getHours() - 12;
        AM = (hours>=12 ? true : false);
    }else{
        hours = time.getHours();
        AM = (hours>=12 ? false : true);
    }

    // Get the current minutes
    var minutes = time.getMinutes();

    // Set minute
    if((minutes + addMin) >= 60 || (minutes + addMin) < 0){
        overMin = (minutes + addMin) % 60;
        overHour = Math.floor((minutes + addMin - Math.abs(overMin))/60);
        if(overMin < 0){
            overMin = overMin + 60;
            overHour = overHour-Math.floor(overMin/60);
        }
        newMin = String((overMin<10 ? '0' : '') + overMin);
        addHour = addHour + overHour;
    }else{
        newMin = minutes + addMin;
        newMin = String((newMin<10 ? '0' : '') + newMin);
    }
    // Set hour
    if((hours + addHour >= 13) || (hours + addHour <= 0)){
        overHour = (hours + addHour) % 12;
        ndble = Math.floor(Math.abs((hours + addHour)/12));
        if(overHour <= 0){
            newHour = overHour + 12;
            if(overHour == 0){
                ndble++;
            }
        }else{
            if(overHour == 0){
                newHour = 12;
                ndble++;
            }else{
                ndble++;
                newHour = overHour;
            }
        }
        newHour = (newHour<10 ? '0' : '') + String(newHour);
        AM = ((ndble + 1) % 2 === 0) ? AM : !AM;
    }else{
        AM = (hours + addHour == 12 ? !AM : AM);
        newHour = String((Number(hours) + addHour < 10 ? '0': '') + (hours + addHour));
    }
    var am = (AM) ? 'AM' : 'PM';
    return new Array(newHour, newMin, am);
};

This can be used without parameters to get the current time:

getTime();

Or with parameters to get the time with the added minutes/hours:

getTime(1, 30); // Adds 1.5 hours to current time
getTime(2);    // Adds 2 hours to current time
getTime(0, 120); // Same as above

Even negative time works:

getTime(-1, -30); // Subtracts 1.5 hours from current time

This function returns an array of:

array([Hour], [Minute], [Meridian])
Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
durkinza
  • 87
  • 1
  • 4
  • 4
    What advantage does this 56-line monster of a function have over the [two-line approach in the top-voted answer](https://stackoverflow.com/a/1050782/1709587)? -1 because there's huge extra complexity here for no benefit I can see. – Mark Amery Sep 22 '19 at 17:20
1

SPRBRN is correct. In order to account for the beginning/end of the month and year, you need to convert to Epoch and back.

Here's how you do that:

var milliseconds = 0;          //amount of time from current date/time
var sec = 0;                   //(+): future
var min = 0;                   //(-): past
var hours = 2;
var days = 0;

var startDate = new Date();     //start date in local time (we'll use current time as an example)

var time = startDate.getTime(); //convert to milliseconds since epoch

//add time difference
var newTime = time + milliseconds + (1000*sec) + (1000*60*min) + (1000*60*60*hrs) + (1000*60*60*24*days);

var newDate = new Date(newTime); //convert back to date; in this example: 2 hours from right now

Or do it in one line (where variable names are the same as above:

var newDate =
    new Date(startDate.getTime() + millisecond +
        1000 * (sec + 60 * (min + 60 * (hours + 24 * days))));
Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
JED
  • 1,336
  • 1
  • 13
  • 46
0

If you need it as a string, for example:

var defaultTime: new Date().getHours() + 1 + ":" + new Date().getMinutes();
Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
khaled saleh
  • 375
  • 5
  • 17
-2

A little messy, but it works!

Given a date format like this: 2019-04-03T15:58

  //Get the start date.
  var start = $("#start_date").val();
  //Split the date and time.
  var startarray = start.split("T");
  var date = startarray[0];
  var time = startarray[1];

  //Split the hours and minutes.
  var timearray = time.split(":");

  var hour = timearray[0];
  var minute = timearray[1];
  //Add an hour to the hour.
  hour++;
  //$("#end_date").val = start;
  $("#end_date").val(""+date+"T"+hour+":"+minute+"");

Your output would be: 2019-04-03T16:58

Suraj Rao
  • 28,850
  • 10
  • 94
  • 99
Carl Du Plessis
  • 195
  • 1
  • 6
-3

The easiest way to do it is:

var d = new Date();
d = new Date(d.setHours(d.getHours() + 2));

It will add 2 hours to the current time.

The value of d = Sat Jan 30 2021 23:41:43 GMT+0500 (Pakistan Standard Time).

The value of d after adding 2 hours = Sun Jan 31 2021 01:41:43 GMT+0500 (Pakistan Standard Time).

Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124