How to add 30 minutes to a JavaScript Date object?

Front End Technology Javascript Web Development

In this tutorial, we will learn how to add 30 minutes to a JavaScript Date object. Here we will discuss two methods which are following.

Using the setMinutes( ) Method
Using the getTime() Method

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

Date.setMinutes(min, sec, ms);

Parameter

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

Approach

To add 30 minutes into the Date object using the setMinutes method first we get the value of minutes of the current time using getMinutes( ) method and then add 30 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- adding 30 minutes to JavaScript Date Object</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>

Using the getTime( ) Method

JavaScript date getTime() method returns the numeric value corresponding to the time for the specified date according to universal time. The value returned by the getTime() method is the number of milliseconds since 1 January 1970 at 00:00:00.

Syntax

Date.getTime()

Approach

To add 30 minutes to the Date Object first, we get the current time by using the Date.getTime( ) method and then add 30 minute’s milliseconds value (30 * 60 * 1000) to it and pass the added value to the Date Object.

Example

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


<html>
<head>
   <title>Example- add 30 minutes to Date Object</title>
</head>
<body>
   <h2> Add 30 minutes to the JavaScript Date object using getTime( ) 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 = new Date(dt.getTime() + 30 * 60 * 1000)
         ut.innerText = "Updated Time : " + dt.toLocaleTimeString();
      }, 1000)
   }
</script>
</html>

We have discussed two approaches to adding 30 minutes to a JavaScript Data object. The first method is to use the getTime() method and the second is to use the setMinutes() method