How to change getHours() to 2 digit format in JavaScript

We will learn how to change getHours() to 2 digit format in JavaScript through three different methods: using toLocaleTimeString(), padStart() and ternary operator. This basic knowledge is very helpful when you work with Time in JavaScript.

Change getHours() to 2 digit format in JavaScript

Using the toLocaleTimeString() instead

Firstly, you have to know exactly the syntax and usage of the toLocaleTimeString() method:

Syntax:

toLocaleTimeString(locales, options)

Parameters:

• locales: A string or an array of strings that represents a BCP-47 language tag to format the result.
• options: An object declaring the output format corresponding to the options of time format.

The fact that you are using getHours() is that you need to get the hour part of a date object. However, this is also another method that can help you deal with this, as follows:

let date = new Date('November 20, 2022 07:24:00')
let options = {hour: '2-digit'}
let time = date.toLocaleTimeString([],options)
console.log(time)

Output: 

07 AM

What we actually want here is not to declare the locales parameter but the options, as this parameter can define what we want to receive in the result and, therefore, can display the hour in 2 digit format such as above.

Using padStart()

The padStart method allows us to add a leading zero to the start of the string.

Syntax:

padStart(length, string)

Parameters:

• length: The target length of the output, in this case, is 2.
• string: A string to pad the current string calling the method with.

We know that the hour part only has a maximum length of 2, so that’s what we set in the length parameter:

let date = new Date('November 20, 2022 07:24:00')
let time = date.getHours().toString().padStart(2, '0')
console.log(time)

Output: 

07

The method padStart() is not working in Internet Explorer. If you want to support any browsers, use the next solution instead.

Using ternary operator

This approach doesn’t require any functions. It works exactly as an if-else statement and therefore supports all browsers:

let date = new Date('November 20, 2022 07:24:00')
let time = date.getHours()
time = (time>=10)?"":"0"+time
console.log(time)

Output:

07

The logic behind this approach is really simple. Because if the hour in the time is greater or equal to 10, it appears in the 2-digit format already, and therefore we need to concatenate it with an empty string. Otherwise, the hour will range from 0 to 9. We should have a zero character before it becomes a 2-digit format.

Summary

We have learned how to change getHours() to 2 digit format in JavaScript in three different ways. Please bear in mind that the third method is the simplest to use. Using our solutions in this tutorial and others, such as JavaScript Dates, you can work with a date and time.

Maybe you are interested:

• Change getSeconds() to 2 digit format in JavaScript
• Change getMinutes() to 2 digit format in JavaScript
• Change getDate() to 2 digit format in JavaScript

Edward Anderson

I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.

---

Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R