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
– jas7457, Commented Apr 2, 2017 at 22:13

Chris · Accepted Answer · 2017-04-03 01:01:04Z

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 · Accepted Answer · 2017-04-02 22:29:20Z

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 2, 2017 at 22:29

answered Apr 2, 2017 at 22:15

charlietfl

172k14 gold badges125 silver badges154 bronze badges

4 Comments

Roko C. Buljan Over a year ago

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?

zerkms Over a year ago

@RokoC.Buljan there is no such restriction ecma-international.org/ecma-262/6.0/…

charlietfl Over a year ago

@RokoC.Buljan if you go over it should go into following day

jas7457 Over a year ago

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

Dharman · Accepted Answer · 2020-11-09 14:09:11Z

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 9, 2020 at 14:09

Dharman♦

33.9k27 gold badges105 silver badges157 bronze badges

answered Nov 9, 2020 at 14:03

Cedrick Campoto

1211 silver badge3 bronze badges

Collectives™ on Stack Overflow

Adding hours to a Javascript date in a loop

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related