Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add 2 hours to a JavaScript Date object?
In this tutorial, we will learn how to add 2 hours to a JavaScript Date object. Here we will discuss two methods which are following.
- Using the getTime() Method
- Using the setHours() Method
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 2 hours to the Date Object first, we get the current time by using the Date.getTime() method and then add 2 hour's milliseconds value (2 * 60 * 60 * 1000) to it and pass the added value to the Date Object.
Example 1
In this example, we are adding 2 hours to the current time using the getTime() method.
<html>
<head>
<title>Example: add 2 hrs to JavaScript Date Object</title>
</head>
<body>
<h2> Add 2 hours to the JavaScript Date object using getTime() 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 currentTime = new Date().getTime();
let updatedTime = new Date(currentTime + 2 * 60 * 60 * 1000);
ut.innerText = "Updated Time : " + updatedTime.toLocaleTimeString();
}, 1000);
}
</script>
</html>
Using the setHours() Method
JavaScript date setHours() method sets the hours for a specified date according to local time.
Syntax
Date.setHours(hours, minutes, seconds, ms)
Parameters
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.
Parameters except hours are optional.
Approach
To add 2 hours into the Date object using the setHours() method first we get the value of hours of the current time and then add 2 into it and pass the added value to the setHours() method.
Example 2
In this example, we are adding 2 hours to the current time using the setHours() method.
<html>
<head>
<title>Program to add 2 hours to Date object</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>
Comparison
| Method | Approach | Best For |
|---|---|---|
getTime() |
Add milliseconds (2 * 60 * 60 * 1000) | Precise time calculations |
setHours() |
Modify hours directly | Simple hour adjustments |
Conclusion
Both methods effectively add 2 hours to a JavaScript Date object. Use getTime() for millisecond precision or setHours() for straightforward hour modifications based on your specific requirements.
29K+ Views
