How to add hours and minutes to a date with JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we will learn how to add hours and minutes to a date with JavaScript. We have multiple methods to achieve this which are the following.

Add hours using the setHours() Method.
Add minutes using the setMinutes() Method.
Add hours or minutes with the getTime() Method.

Add hours using the setHours Method

JavaScript date setHours() method sets the hours for a specified date according to local time.

Syntax

Following is the syntax to apply the setHours() method to add hours to date −

Date.setHours(hours, minutes, seconds, ms)

Note − Parameters except the first one are always optional.

Parameter

hours − An integer between 0 and 23, representing the hour.
minutes − An integer between 0 and 59, representing the minutes.
seconds − An integer between 0 and 59, representing the seconds. If you specify the seconds parameter, you must also specify the minutes.
ms − A number between 0 and 999, representing the milliseconds. If you specify the ms parameter, you must also specify the minutes and seconds.

Approach

To add hours into the Date object using the setHours() method first we get the value of hours of the current time and then add the number of hours into it and pass the added value to the setHours( ) method.

Example

In this example we are adding 2 Hours to the current time/time.


<html>
<head>
   <title>Example – add hours to date in JavaScript</title>
</head>
<body>
   <h2> Add 2 hours to the JavaScript Date object using setHours( ) method </h2>
   <p> Click on the button to add 2 Hours to the current date/time.</p>
   <button onclick="add()">Click Me</button>
   <p id="currentTime">Current Time : </p>
   <p id="updatedTime">Updated Time: </p>
</body>
<script>
   // Code the show current time
   let ct = document.getElementById("currentTime")
   setInterval(() => {
      let currentTime = new Date().getTime();
      ct.innerText = "Current Time : " + new Date(currentTime).toLocaleTimeString()}, 1000)
   
   // Code to add 2 hours to current Time
   let ut = document.getElementById("updatedTime")
   function add() {
      setInterval(() => {
         let dt = new Date();
         dt.setHours(dt.getHours() + 2);
         ut.innerText = "Updated Time : " + dt.toLocaleTimeString(); 
      }, 1000)
   }
</script>
</html>

Add minutes using the setMinutes() Method

The setMinutes() function of the date object accepts an integer representing the Minutes and replaces the value of the Minutes in the current date with it.

Syntax

Following is the syntax to add minutes using setMinutes() method −

Date.setMinutes(minutes, seconds , ms );

Note − Parameters except the first are always optional.

Parameter

minutes − It’s an integer between 0 and 59, representing the minutes.
seconds − It’s an integer between 0 and 59, representing the seconds. If you specify the seconds parameter, you must also specify the minutes.
ms − A number between 0 and 999, representing the milliseconds. If you specify the ms parameter, you must also specify the minutes and seconds.

Approach

To add the number of minutes into the Date object using the setMinutes() method first we get the value of minutes of the current time using the getMinutes( ) method and then add the desired number of minutes into it and pass the added value to the setMinutes( ) method.

Example

In this example we are adding 30 Minutes to the current time/time.


<html>
<head>
   <title>Example – add minutes to the date</title>
</head>
<body>
   <h2> Add 30 minutes to the JavaScript Date object using setMinutes( ) method </h2>
   <p> Click on the button to add 30 minutes to the current date/time.</p>
   <button onclick="add()">Click Me</button>
   <p id="currentTime">Current Time : </p>
   <p id="updatedTime">Updated Time: </p>
</body>

<script>
   
   // Code the show current time
   let ct = document.getElementById("currentTime")
   setInterval(() => {
      let currentTime = new Date().getTime();
      ct.innerText = "Current Time : " + new Date(currentTime).toLocaleTimeString() }, 1000)

   // Code to add 30 minutes to current Time
   let ut = document.getElementById("updatedTime")
   function add() {
      setInterval(() => {
      let dt = new Date();
      dt.setMinutes(dt.getMinutes() + 30)
      ut.innerText = "Updated Time : " + dt.toLocaleTimeString(); }, 1000)
   }
</script>
</html>

Add Hours or Minutes with the getTime() Method

We can apply the getTime() method to add hours or minutes to the JavaScript Date object. The syntax of this method is as follows.

Syntax

Date.getTime()

Approach

To add the number of minutes or hours to the Date Object first, we get the current time by using the Date.getTime( ) method and then add the milliseconds value of our desired adding timing to it and pass the added value to the Date Object.

Example

In this example, we are adding 30 minutes and two hours to the current time using the getTime() method.


<html>
<head>
   <title>Example – add hours or minutes to JavaScript Date object</title>
</head>
<body>
   <h2> Add 30 minutes and 2 hours to the JavaScript Date object using getTime( ) method </h2>
   <p> Click on the button to add 30 minutes and 2 hours to the current date/time.</p>
   <button onclick="add()">Click Me</button>
   <p id="currentTime">Current Time : </p>
   <p id="updatedTime1">Updated Time (Adding 30 minutes): </p>
   <p id="updatedTime2">Updated Time (Adding 2 hours): </p>
</body>

<script>
   
   // Code the show current time
   let ct = document.getElementById("currentTime")
   setInterval(() => {
      let currentTime = new Date().getTime();
      ct.innerText = "Current Time : " + new Date(currentTime).toLocaleTimeString() }, 1000)

   // Code to add 30 minutes and 2 hours to current Time
   let ut1 = document.getElementById("updatedTime1")
   let ut2 = document.getElementById("updatedTime2")

   function add() {
      setInterval(() => {
         
         // Adding 30 minutes
         let dt1 = new Date();
         dt1 = new Date(dt1.getTime() + 30 * 60 * 1000)
         ut1.innerText = "Updated Time (Adding 30 minutes) : " + dt1.toLocaleTimeString();
   
         // Adding 2 hours
         let dt2 = new Date();
         dt2 = new Date(dt2.getTime() + 2 * 60 * 60 * 1000)
         ut2.innerText = "Updated Time (Adding 2 hours) : " + dt2.toLocaleTimeString(); 
      }, 1000)
   }
</script>
</html>

In summary, we have discussed three approaches to add hours or minutes to a JavaScript Date object. The first approach is using the setHours() method. The second is using the setMinutes() method and the third one is the getTime() method.