How to Use the setHours() Method in JavaScript
-
Use the
setHours()
Method With Only theHour
Parameter in JavaScript -
Use the
setHours()
Method With All Parameters in JavaScript
In the development sector, we often need to alter the time zone and set times to benefit the users.
The JavaScript setHours()
method implies that when we set a certain hour
count to the method, it will reset the time zone according to that number (hour), and here, another aspect to consider is the local time zone.
We alter the time by invoking a Date()
constructor, which takes a string to identify the current situation of the time zone. Even if we do not pass a string consisting of the day and year, it will still grab the current stand based on the local standard time.
Now, we will explore examples by viewing the multiple ways of implementing the setHours()
method. Let’s dig in!
Use the setHours()
Method With Only the Hour
Parameter in JavaScript
Technically, instantiating the Date()
constructor grabs the most recent date-time detail. But if we wish to alter the hour
of that certain instance, we can set the parameter for the setHours()
method.
In this regard, every time the Date()
constructor object is instantiated, only the hour
of that instance will be updated as the parameter. And the seconds and minutes will keep updating in every run.
Code Snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script>
const event = new Date();
event.setHours(7);
document.write(event);
</script>
</body>
</html>
Output:
As it can be seen, the hour
parameter is taken, and the rest, aka minutes
, seconds
, day
, month
, and year
, have been defined as the Date()
constructor grabs.
Use the setHours()
Method With All Parameters in JavaScript
We will alter the current time frame with the defined hour
, minute
, and second
in this specific case. This implies that, whatever the time the Date()
fetches, the time values will be altered as we set the parameters, but the date
and day
count will be set according to the local time zone.
This is to specify that the second and third parameter (minute
and second
) has a valid range of 0-59
, and the hour
has a valid range of 0-23
. We will also see how the setHours()
method deals with such cases in the following example.
Code Snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script>
const event = new Date();
event.setHours(25, 42, 76);
document.write(event);
</script>
</body>
</html>
Output:
Here, the hour parameter of the setHours()
method is 25
, which is out of the defined range.
It implies that it will perform 25-24
, and thus the day
also gets affected and turns to May 14. Similarly, the second
portion is calculated by 76-60
.