This guide will help you learn how to add hours to a date object using JavaScript by a method built-in Date object. Let’s follow this tutorial to learn about it with the explanation and examples below.
Add Hours To A Date Object Using JavaScript
These are some solutions that can help you add hours to a date object using JavaScript.
Solution 1: Using setHours() method
This method helps you set the hour of the date that you want.
Syntax:
Date.setHours(hours)
Parameters:
- hours: The hour of the date you want to set.
Return value:
The number of milliseconds from January 1, 1970 to now.
Look at the example below to learn more about this solution.
<!DOCTYPE html>
<html>
<head>
<title>
How To Add Hours To A Date Object Using JavaScript
</title>
</head>
<body style="text-align:left;">
<h1 style="color: rebeccapurple;">
How To Add Hours To A Date Object Using JavaScript
</h1>
<h2 style="color:rgb(52, 150, 206);">
Add Hours To A Date Object Using JavaScript
</h2>
<h3: style="color: black;">
Solution 1: Use the setHours() method
</h3>
<script>
document.write("<br>The current time: ");
const date = new Date();
document.write(date.toLocaleTimeString()+"<br>") // print the current time.
// You can set the hour as 5 by this method.
date.setHours(5)
document.write("The updated time: ")
document.write(date.toLocaleTimeString()) // print the time after setting.
</script>
</body>
</htmlOutput:
Solution 2: Using setHours() and getHours() method
The usage of the setHours() method I mentioned in solution 1. So you will walk through to learn about the getHours() method.
The getHours() method will return the hour of the date.
Syntax:
Date.getHours()
Parameters:
- None
Return value:
The hour of the date.
Look at the example below to learn more about this solution.
<!DOCTYPE html>
<html>
<head>
<title>
How To Add Hours To A Date Object Using JavaScript
</title>
</head>
<body style="text-align:left;">
<h1 style="color: rebeccapurple;">
How To Add Hours To A Date Object Using JavaScript
</h1>
<h2 style="color:rgb(52, 150, 206);">
Add Hours To A Date Object Using JavaScript
</h2>
<h3: style="color: black;">
Solution 2: Using setHours() and getHours() method
</h3>
<script>
document.write("<br>The current time: ");
const date = new Date();
document.write(date.toLocaleTimeString()) // print the current time.
// This is the function to add Hours to a Date object.
function addHours(date,hours){
const result = new Date(date)
result.setHours(result.getHours()+hours)
return result
}
const updated_date = addHours(date,5)
document.write("<br>The updated time: "+updated_date.toLocaleTimeString())
</script>
</body>
</htmlOutput :
Solution 3: Use the setTime() method
The setTime() method helps you set the time or date by assigning the milliseconds value.
Syntax:
Date.setTime(value)
Parameters:
- value: milliseconds
Return value:
The number of milliseconds from midnight January 1 1970 to now.
Look at the example below to learn more about this solution.
<!DOCTYPE html>
<html>
<head>
<title>
How To Add Hours To A Date Object Using JavaScript
</title>
</head>
<body style="text-align:left;">
<h1 style="color: rebeccapurple;">
How To Add Hours To A Date Object Using JavaScript
</h1>
<h2 style="color:rgb(52, 150, 206);">
Add Hours To A Date Object Using JavaScript
</h2>
<h3: style="color: black;">
Solution 3: Use the setTime() method
</h3>
<script>
document.write("<br>The current time: ");
const date = new Date();
document.write(date.toLocaleTimeString()) // print the current time.
// This is the function to add Hours to a Date object.
function addHours(date,hours){
const result = new Date(date)
result.setTime(result.getTime()+hours*60*60*1000)
return result
}
const updated_date = addHours(date,5)
document.write("<br>The updated time: "+updated_date.toLocaleTimeString())
</script>
</body>
</htmlOutput:
Summary
To add hours to a date object using JavaScript, you can use the setHours() method, the setHours() method combined with the getHours() method, or the setTime() method. Choose the method that is the best for you.
Maybe you are interested:
- Add Hours to a Date object Using JavaScript
- Change getDate() to 2 digit format in JavaScript
- Change getMonth() to 2 digit format in JavaScript
My name is Thomas Valen. As a software developer, I am well-versed in programming languages. Don’t worry if you’re having trouble with the C, C++, Java, Python, JavaScript, or R programming languages. I’m here to assist you!
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Java, Python, JavaScript, R
