As if programming and dealing with dates did not have enough headaches that come from timezones, daylight savings, leap years the JavaScript Date API does not offer us a way to add hours to Date objects.
Fortunately with this tutorial we are going to do this ourselves and do it a couple of ways.
Method 1: Create a function ( use Date.setHours() )
function addHours(dateObj, hours){
//We create a new Date Object so that we dont alter the one passed into the function (this is a pure function )
const dateUpdated = new Date(dateObj.getTime());
dateUpdated.setHours( dateUpdated.getHours() + hours);
return dateUpdated;
}
const dateDemo = new Date('2022-06-22T12:00:00.000Z');
console.log(dateDemo); //2022-06-22T12:00:00.000Z
let dateModified = addHours(dateDemo,1)
console.log(dateModified); //2022-06-22T13:00:00.000Z
dateModified = addHours(dateDemo,3); //Original Date is not modified
console.log(dateModified); //2022-06-22T15:00:00.000Z
dateModified = addHours(dateModified,3)
console.log(dateModified); //2022-06-22T18:00:00.000Z
In the above function we create the variable dateUpdated and create a new Date Object so that the dateObj that is passed does not get modified. The Date.setHours() function updates the object, the above implementation is a pure state function, this will help prevent unexpected behaviours.
Method 2: Use NPM Package date-fns
If you are inclined to use NPM packages then this is a great one to make dates a little nicer in JavaScript or NodeJS
So this assumes you have NodeJS installed or an IDE where you can install NPM packages, you can install the package via the command below. We are only going to focus on demonstrating the addHours functionality.
npm install date-fns
import { addHours } from 'date-fns';
const date = new Date('2022-06-22T12:00:00.000Z');
//Add 1 hour to the existing date
let newDate = addHours(date, 1);
console.log(newDate); // 2022-06-22T13:00:00.000Z
//Add 2 hour to the already updated date
newDate = addHours(newDate, 2);
console.log(newDate); // 2022-06-22T15:00:00.000Z
//Original Date Object has not been modified
console.log(date); // 2022-05-15T12:00:00.000Z
The NPM package offers loads of date functions if you are in a situation to use this i would recommend it, anything that makes our lives easier with dates is worthwhile!
A few examples of date-fns functions
addDays, addHours, subHours, addMinutes, subMinutes, addSeconds, subSeconds, subDays, addWeeks, subWeeks, addYears, subYears,
