How To Add Hours To A Date In JavaScript?

add hours to a date in JavaScript

Do you want to find ways to add hours to a date in JavaScript? Don’t worry, we will give you some helpful methods to do it. Follow this article now.

Some ways to add hours to a date in JavaScript?

Method 1: Use the getTime() 

The method below will help us to create a new function to do what we need

JavaScript getTime()

Syntax of this method: 

Date.getTime() 

This method will return the numbers of milliseconds from midnight of January 1, 1970, to the specified date we pass in.

Example:

// Assign current date and time to variable
const now = new Date();
console.log({ now });

// getTime() will  returns the number of milliseconds since midnight January 1, 1970
console.log(now.getTime());

Output

{ now: 2022-09-07T11:45:17.142Z }
1662551117142

Method 2: Use the setTime() method

Javascript setTime() method sets a date by adding time to midnight January 1, 1970.

Syntax of this method:

Date.setTime(millisec)

Parameters:

  • millisec: Required. Time you want to add to midnight January 1, 1970 in milliseconds.

Example of setTime() method:

const d = new Date();
console.log({ d });

 // Set d by add 9909091231233 milliseconds to January 1, 1970
d.setTime(9909091231233);
console.log({ d });

Output:

 d: 2022-09-07T12:20:40.362Z }
{ d: 2284-01-03T13:20:31.233Z }

Method 3: Add hours to date in Javascript solution 

Example: add 1 hour through click button.

<!DOCTYPE HTML>
<html>  
<head>
    <title>
        LearnShareIT: Adding hours to Date object in JS
    </title>
</head>  
<body 
      id="body">
    <h1 style="color:rgb(14, 133, 180)">  
        LearnShareIT
        </h1>
    <p class="timeNow"  
       style="font-size: 1rem;
              font-weight: lighter;">
    </p>
    <button >
        addHours
    </button>
    <p class="timeAdd" 
       style=" font-size: 1rem; 
              font-weight: lighter;">
    </p>
    <script>
        const button = document.querySelector('button') 
        const timeNow = document.querySelector(".timeNow");
        const timeAdd = document.querySelector(".timeAdd")

        const today = new Date();
        timeNow.innerHTML = "Today's date = " + today;

        // Use prototype method to add new function to prototype
        Date.prototype.addHours = function(h) {
            this.setTime(this.getTime() +(h * 60 * 60 * 1000));
            return this;
        }
  
        function execute(e) {
            const a = new Date();
            a.addHours(1);
            timeAdd.innerHTML = a;
        }
        button.addEventListener('click',execute)
    </script>
</body>  
</html>

Output :

Before click:

After click:

Summary

In this tutorial, we have explained how we add hours to a date in JavaScript in a manual way. You can use the add method we create in a lot of ways and can also create another method base on the way I guide you.

Maybe you are interested:

Leave a Reply

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