Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add hours and minutes to a date with JavaScript?
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.
10K+ Views
