How to add hours to a Date object?

JavascriptDatetime

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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;
}

Solution 2 - Javascript

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

Test:

alert(new Date().addHours(4));

Solution 3 - Javascript

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

Solution 4 - Javascript

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.

Solution 5 - Javascript

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.

Solution 6 - Javascript

You can use the Moment.js library.

var moment = require('moment');
foo = new moment(something).add(10, 'm').toDate();

Solution 7 - Javascript

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);

Solution 8 - Javascript

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;
}

Solution 9 - Javascript

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))

Solution 10 - Javascript

There is an add in the Datejs library.

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

Solution 11 - Javascript

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;
    };
}

Solution 12 - Javascript

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.

Solution 13 - Javascript

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)

Solution 14 - Javascript

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])

Solution 15 - Javascript

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))));

Solution 16 - Javascript

I think this should do the trick

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

Solution 17 - Javascript

If you need it as a string, for example:

var defaultTime: new Date().getHours() + 1 + ":" + new Date().getMinutes();

Solution 18 - Javascript

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

Solution 19 - Javascript

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).

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJeff Meatball YangView Question on Stackoverflow
Solution 1 - JavascriptJason HarwigView Answer on Stackoverflow
Solution 2 - JavascriptkennebecView Answer on Stackoverflow
Solution 3 - JavascriptSuperNovaView Answer on Stackoverflow
Solution 4 - JavascriptTahir HassanView Answer on Stackoverflow
Solution 5 - JavascriptpetterView Answer on Stackoverflow
Solution 6 - JavascriptCmagView Answer on Stackoverflow
Solution 7 - Javascriptjames aceView Answer on Stackoverflow
Solution 8 - JavascriptEdward OlamisanView Answer on Stackoverflow
Solution 9 - JavascriptPatronautView Answer on Stackoverflow
Solution 10 - JavascriptNosrednaView Answer on Stackoverflow
Solution 11 - JavascriptMikael EngverView Answer on Stackoverflow
Solution 12 - JavascriptSPRBRNView Answer on Stackoverflow
Solution 13 - JavascriptHenrique Van KlaverenView Answer on Stackoverflow
Solution 14 - JavascriptdurkinzaView Answer on Stackoverflow
Solution 15 - JavascriptJEDView Answer on Stackoverflow
Solution 16 - JavascriptJustice Selorm BruceView Answer on Stackoverflow
Solution 17 - Javascriptkhaled salehView Answer on Stackoverflow
Solution 18 - JavascriptCarl Du PlessisView Answer on Stackoverflow
Solution 19 - JavascriptQasim RizviView Answer on Stackoverflow