Home Original page

JavaScript Date setHours() Method

The JavaScript Date setHours() method is used to set the "hour" component of a Date object. It allows updating the hours component based on a given numeric value, which can be within the range 0 to 23. The return value of this method will be an updated timestamp of the Date object, which reflects the changes made by modifying the hour component.

Additionally, we can modify the minute, seconds, and milliseconds of the date object. It does not return a new Date object but instead updates the existing Date object it was called upon.

Syntax

Following is the syntax of JavaScript Date setHours() method −

setHours(hoursValue, minutesValue, secondsValue, millisecondsValue);

Parameters

This method accepts four parameters. The same is described below −

  • hoursValue − An integer representing the hour (0 to 23).
    • If -1 is provided, it will result in the last hour of the previous day.
    • If 24 is provided, it will result in the first hour of the next day.
  • minutesValue (optional) − An integer representing the minutes (0 to 59). If not provided, minutes will be set to 0.
    • If -1 is provided, it will result in the last minute of the previous hour.
    • If 60 is provided, it will result in the first minute of the next hour.
  • secondsValue(optional) − An integer representing the seconds (0 to 59). If not provided, seconds will be set to 0.
    • If -1 is provided, it will result in the last second of the previous minute.
    • If 60 is provided, it will result in the first second of the next minute.
  • millisecondsValue(optional) − An integer representing the milliseconds (0 to 999). If not provided, milliseconds will be set to 0.
    • If -1 is provided, it will result in the last millisecond of the previous second.
    • If 1000 is provided, it will result in the first millisecond of the next second.

Return Value

This method returns the timestamp (in milliseconds) representing the modified Date object after setting the specified hour, minutes, seconds, and milliseconds.

Example 1

In the following example, we are using the JavaScript Date setHours() method to set the "hours" of the current Date to 20 −

<html>
<body>
<script>
   const currentDate = new Date();
   currentDate.setHours(20); // Set the hours to 20

   document.write("Updated Date:", currentDate);
</script>
</body>
</html>

Output

If we execute the above program, the hours will be set to 20, and the minutes and seconds will be according to the local time.

Example 2

Here, we are setting the "hours" to (10) and "minutes" to (30) −

<html>
<body>
<script>
   const currentDate = new Date();
   currentDate.setHours(10, 30); // Set the hours to 10 and the minutes to 30

   document.write("Updated Date:", currentDate);
</script>
</body>
</html>

Output

After executing, this program returns a timestamp with the provided hours and minutes. The seconds will be according to the local time.

Example 3

Here, we are setting the "hours" to (10), "minutes" to (30), and "seconds" to (45) −

<html>
<body>
<script>
   const currentDate = new Date();
   currentDate.setHours(10, 30, 45); // Set the hours to 10, minutes to 30, and seconds to 45

   document.write("Updated Date:", currentDate);
</script>
</body>
</html>

Output

It returns a timestamp as "Wed Dec 27 2023 10:30:45 GMT+0530 (India Standard Time)".

Example 4

If we provide "-1" for hoursValue, this method will gives the last hour of the previous day −

<html>
<body>
<script>
   const currentDate = new Date('2023-11-20 15:00:00'); //November 20 2023
   currentDate.setHours(-1);

   document.write("Updated Date: ", currentDate);
</script>
</body>
</html>

Output

It returns a timestamp as "Sun Nov 19 2023 23:00:00 GMT+0530 (India Standard Time)".

Example 5

If we provide "60" for minutesValue, this method will gives the first minute of the next hour −

<html>
<body>
<script>
   const currentDate = new Date('2023-11-20 15:00:00'); //November 20 2023
   currentDate.setHours(18, 60);

   document.write("Updated Date: ", currentDate);
</script>
</body>
</html>

Output

It returns a timestamp as "Mon Nov 20 2023 19:00:00 GMT+0530 (India Standard Time)".

Example 6

If we provide "60" for secondsValue, this method will gives the first second of the next minute −

<html>
<body>
<script>
   const currentDate = new Date('2023-11-20 15:00:00'); //November 20 2023
   currentDate.setHours(18, 30, 60);

   document.write("Updated Date: ", currentDate);
</script>
</body>
</html>

Output

It returns a timestamp as "Mon Nov 20 2023 18:31:00 GMT+0530 (India Standard Time)".