How to Use the setHours() Method in JavaScript

Anika Tabassum Era Feb 15, 2024
  1. Use the setHours() Method With Only the Hour Parameter in JavaScript
  2. Use the setHours() Method With All Parameters in JavaScript
How to Use the setHours() Method 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:

Use setHours() Method With Only Hour Parameter

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:

Use All Parameter in setHours() Method

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.

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Related Article - JavaScript Time