How to Add Hours to a Date in JavaScript?

To add hours to a date in JavaScript, call the getHours() method on the Date object to get the original hours from the date and then pass the original hours + hours to be added to the setHours() method as an argument.

The setHours() method will set the new hours to the given date object.

For example,

// Creates a new Date object with the specified date and time
const date = new Date('2023-03-23T12:00:00.000Z'); 

// Hours to be added
const hoursToAdd = 5;

// Get old hours from the date
const originalHours = date.getHours();

// Set new hours
date.setHours(originalHours + hoursToAdd);

console.log(date.toISOString());
// Output: 👉 "2023-03-23T17:00:00.000Z"

If you want to add hours to the current date-time, you have to call the Date() constructor without any parameters to get the current date-time object and then use the setHours() method to set the new hours.

For example,

// Get current date-time object
const date = new Date(); 

console.log('Before adding hours: ', date.toLocaleString());

// Hours to be added
const hoursToAdd = 5;

// Get current hours from the current date-time object
const originalHours = date.getHours();

// Set new hours
date.setHours(originalHours + hoursToAdd);

console.log('After adding hours: ', date.toLocaleString());

Output:

Before adding hours:  3/23/2023, 10:46:25 AM
After adding hours:  3/23/2023, 3:46:25 PM

The setHours() method not just let you set the hours for the specified date but you can also use it to set minutes and seconds and milliseconds.

You can pass the minutes, seconds and milliseconds to the setHours() method as the second, third and fourth paramters respectively.

Here is its syntax:

dateObj.setHours(hoursValue, minutesValue, secondsValue, msValue);

The following example adds 2 hours, 30 minutes and 20 seconds to the current date time using the setHours() method:

// Get current date-time object
const date = new Date(); 

console.log('Before adding hours: ', date.toLocaleString());

// Hours, minutes and seconds to add
const hoursToAdd = 2;
const minutesToAdd = 30;
const secondsToAdd = 20;

// Get current hours, minutes and seconds from date object
const originalHours = date.getHours();
const originalMinutes = date.getMinutes();
const originalSeconds = date.getSeconds();

// Set new hours, minutes and seconds
date.setHours(
    originalHours + hoursToAdd,
    originalMinutes + minutesToAdd,
    originalSeconds + secondsToAdd
);

console.log('After adding hours: ', date.toLocaleString());

Output:

Before adding hours:  3/23/2023, 11:05:27 AM
After adding hours:  3/23/2023, 1:35:47 PM

In this example, we have used the toLocaleString() method to convert the date object to its equivalent date string.

The toLocaleString() method returns the string representation of the specified date object according to local time.

2. Use the getTime() and setTime() Methods to Add the Hours

Another popular approach to add hours to a date in JavaScript is to use the getTime() and setTime() methods.

The getTime() method actually returns the timestamp(in milliseconds) for the specified date object.

The timestamp represents the total number of seconds passed since January 1st, 1970 UTC.

So, if we want to add hours to a given date, we can first get the corresponding timestamp value by calling the getTime() method, convert the hours to be added into milliseconds and finally pass the sum of the timestamp and milliseconds(from hours) to the setTime() method as an argument.

For example,

// Get date object from the date string
const date = new Date('2023-03-15T13:30:05.000Z'); 

// Hours to be added
const hoursToAdd = 5;

// Get the timestamp(in milliseconds)
const timestamp = date.getTime();

// Add 5 hours to timestamp
const newTimestamp = timestamp + 5 * 60 * 60 * 1000;

// Set new timestamp for the specified date
date.setTime(newTimestamp);

console.log(date.toISOString());
// Output: 👉 "2023-03-15T18:30:05.000Z"

Please note that the setTime() method takes the value of the timestamp in milliseconds. It means you can use it to add hours, minutes, seconds or even milliseconds to a date object.

That’s because you have to convert the time value into milliseconds before passing it as an argument to the setTime() method.

One more thing that I want to highlight here is that the setHours() and the setTime() methods mutate the original date object.

So, you have to be careful while using them.

If you don’t want the original date object to mutate, consider creating a copy of the original date object and then call the setHours() and setTime() methods on the copied date object.

That’s all for this article. Thanks for reading!