Adding hours to a Javascript date in a loop

Question

I'm getting some strange results from adding hours to a date. I'm basically adding 0, 6, 12, 18, 24, 30, etc hours to a Javascript date. I came across some of the recommendations online (like this: Adding hours to Javascript Date object?), but when in a loop it was skipping ahead many hours/months. It seemed to be keeping the new version of the date and just adding hours to it...when I really just want to add the hours to the original date.

So, here's the basics of what I have.

for (var i = 1; i < 4; i++) {

hour_date.setHours(hour_date.getHours() + hour);

output.push(hour_date...)
}
//where hour is 6, 12, 18, 24, etc in a loop
//and where hour_date is defined earlier and is 
//Sun Apr 02 2017 12:00:00 GMT-0700 (Pacific Daylight Time)

So I'm trying to figure out how to simply add 6 hours to an initial date variable...so I can push those values out to an array. I understand the push part...but I'm just trying to add the hours correctly within the loop.

Thanks very much for any help!

What is "hour" is this scenario? Also, your for statement starts with var = 1, don't you mean var i = 1? — jas7457, Apr 02 '17 at 22:13

Chris · Answer 1 · 2017-04-03T01:01:04.603

It may be simpler to use the date's raw value and add to it in milliseconds.

Example:

var date = Date.now()
console.log(new Date(date))
var date2 = new Date(date+1000*60*60*6) // Add 6 hours.
console.log(date2)
var date3 = new Date(date+1000*60*60*3) // Add 3 hours.
console.log(date3)

In a loop you'll have to make sure you create new variables from the original variable, not modifying the original. In your case this is easy if you simply create new Date objects and insert them into an array. Use .valueOf() to access the underlying number value of a date object.

var date = new Date();
dates = [date];
for(var i = 6; i <= 30; i += 6) {
    dates.push(new Date(date.valueOf() + i * 1000 * 60 * 60));
}
console.log(JSON.stringify(dates, null, 4))

// [
//     "2017-04-03T00:57:52.420Z",
//     "2017-04-03T06:57:52.420Z",
//     "2017-04-03T12:57:52.420Z",
//     "2017-04-03T18:57:52.420Z",
//     "2017-04-04T00:57:52.420Z",
//     "2017-04-04T06:57:52.420Z"
// ]

charlietfl · Answer 2 · 2017-04-02T22:29:20.207

0

You need a new object each time. Currently you are modifying the same object over and over and pushing the same reference to each index of the array

Try:

for (var i= 1; i < 4; i++) {
    var newDate = new Date(hour_date);
    hour += 6;
    newDate.setHours(hour_date.getHours() + hour);    
    output.push(newDate);
}

var hour_date = new Date(), output = [],  hour = 0;
for (var i = 1; i < 10; i++) {
  var newDate = new Date(hour_date);
  hour += 6;
  newDate.setHours(hour_date.getHours() + hour);
  output.push(newDate);
}

console.log(JSON.stringify(output, null, ' '))

edited Apr 02 '17 at 22:29

answered Apr 02 '17 at 22:15

charlietfl

170,828
13
121
150

`setHours` expects a `0`-`23` range number. But he's trying to **add** `n?` hours to and already defined amoun of hours. Should that work? – Roko C. Buljan Apr 02 '17 at 22:16
@RokoC.Buljan there is no such restriction http://www.ecma-international.org/ecma-262/6.0/#sec-date.prototype.sethours – zerkms Apr 02 '17 at 22:17
@RokoC.Buljan if you go over it should go into following day – charlietfl Apr 02 '17 at 22:18
I don't think that will quite work either, assuming "hour" is a constant. That would push 4 of the same dates, just different instances. You could maybe do newDate.setHours(hour_date.getHours() + i*hour); – jas7457 Apr 02 '17 at 22:24

score 0 · Answer 3 · edited Nov 09 '20 at 14:09

0

try this instead;

let hours = [6, 12, 18, 24];
let hour_date = new Date;
        
hours = hours.map(hour=>{
    return new Date(hour_date.getTime() + (hour*60*60*1000))
});
console.log(hours);

edited Nov 09 '20 at 14:09

Dharman

30,962
25
85
135

answered Nov 09 '20 at 14:03

Cedrick Campoto

121
1
3

Adding hours to a Javascript date in a loop

3 Answers3