Categories
JavaScript Answers

How to Add Hours to a JavaScript Date Object?

Spread the love

Date.prototype.getTime and Date.prototype.setTime

We can use the JavaScript native getTime method to get the timestamp of a date in milliseconds.

And we can use the setTime method to set the timestamp of a date in milliseconds.

Therefore, to add hours to an existing date, we can write:

const date = new Date(2021, 1, 1)
const h = 2
date.setTime(date.getTime() + (h * 60 * 60 * 1000))
console.log(date)

We have the date object that has a date that we want to add hours to.

h has the number of hours we want to add.

Then we call setTime with the timestamp of the new date in milliseconds.

We get the timestamp of date plus 2 hours by writing:

date.getTime() + (h * 60 * 60 * 1000)

(h * 60 * 60 * 1000) is 2 hours in milliseconds.

Then we get that date is:

Mon Feb 01 2021 02:00:00 GMT-0800 (Pacific Standard Time)

Date.prototype.getHours and Date.prototype.setHours

We can also use the getHours and setHours method to get and set the hours of a JavaScript date object respectively.

For instance, we can write:

const date = new Date(2021, 1, 1)
const h = 2
date.setHours(date.getHours() + h)
console.log(date)

Then we get the same result as in the previous example.

We may also want to make a copy of the original date object and then change the hours in the copied date object.

For instance, we can write:

const date = new Date(2021, 1, 1)
const h = 2
const copiedDate = new Date(date.getTime());
copiedDate.setHours(date.getHours() + h)
console.log(copiedDate)

We make a copy by passing the timestamp in milliseconds to the Date constructor as we did in the 3rd line.

getTime returns the timestamp in milliseconds.

Date.prototype.getUTCHours and Date.prototype.setUTCHours

We can also use the getUTCHours and setUTCHours method to get and set the hours of a JavaScript date object respectively.

getUTCHours returns the hour of the day in UTC.

setUTCHours sets the hour in UTC.

So we can write:

const date = new Date(2021, 1, 1)
const h = 2
date.setUTCHours(date.getUTCHours() + h)
console.log(date)

to add 2 hours to date .

Moment.js

We can also use moment.js to add hours to a date.

For instance, we can write:

const newDate = new moment(new Date(2021, 1, 1)).add(10, 'hours').toDate();
console.log(newDate)

to add 10 hours to the date we pass into the moment function.

We call add on it to add 10 hours.

The first argument is the quantity to add.

And the 2nd argument is the unit of the quantity to add.

toDate converts the returned moment object with the new date-time back to a native JavaScript date object.

And so newDate is:

Mon Feb 01 2021 10:00:00 GMT-0800 (Pacific Standard Time)

when seen from the console log.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *