Get the Hours and Minutes from a Date in JavaScript

avatar

Borislav Hadzhiev

Mon Oct 25 20212 min read

banner

Photo by Nick Ortego

Get the Hours and Minutes from a Date #

To get the hours and minutes from a date, call the getHours() and getMinutes() methods on the date object. The getHours method returns the hour and the getMinutes() method returns the minutes in the specified date.

index.js
// ๐Ÿ‘‡๏ธ from CURRENT DATE const now = new Date(); const current = now.getHours() + ':' + now.getMinutes(); console.log(current); // ๐Ÿ‘‰๏ธ 13:27 // ๐Ÿ‘‡๏ธ from another DATE const date = new Date('December 14, 2026 08:33:00'); const hoursAndMinutes = date.getHours() + ':' + date.getMinutes(); console.log(hoursAndMinutes); // ๐Ÿ‘‰๏ธ 8:33 // ๐Ÿ‘‡๏ธ With PM / AM const withPmAm = now.toLocaleTimeString('en-US', { // en-US can be set to 'default' to use user's browser settings hour: '2-digit', minute: '2-digit', }); console.log(withPmAm); // ๐Ÿ‘‰๏ธ 01:27 PM

We used the Date.getHours and Date.getMinutes methods to get the hours and minutes for a specific date.

Note that the results from the functions might sometimes return a single digit (if the hours or minutes are less than 10). If you need to make the output consistently show 2 digits, use this approach instead.
index.js
function padTo2Digits(num) { return String(num).padStart(2, '0'); } const date = new Date('December 14, 2026 08:09:00'); const hoursAndMinutes = padTo2Digits(date.getHours()) + ':' + padTo2Digits(date.getMinutes()); console.log(hoursAndMinutes); // ๐Ÿ‘‰๏ธ 08:09

We used the String.padStart method to add a leading zero to the hours and minutes where necessary.

The first parameter we passed to the padStart method is the total length of the string and the second is the pad string.

The padStart method wouldn't pad the hours and minutes if their values are greater than 10, because we've set the total length to 2 characters.

In our next example, we used the toLocaleTimeString method to get a locale specific representation of the hours and minutes.

We passed en-US as the locale and got the hours and minutes formatted as HH:MM PM/AM.

You can pass default as the locale, which would use the user's browser configuration.

index.js
const def = now.toLocaleTimeString('default', { hour: '2-digit', minute: '2-digit', }); console.log(def); // ๐Ÿ‘‰๏ธ 01:46 PM

The second parameter we passed to the method is an options object. We set both the hour and minute property to 2-digit, which means that even if the hours and minutes are less than 10, a leading 0 would automatically get added to make the output consistent.

Similarly, you could use a different locale to get a different output format.

index.js
const enUS = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', }); console.log(enUS); // ๐Ÿ‘‰๏ธ 01:47 PM const enGB = now.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', }); console.log(enGB); // ๐Ÿ‘‰๏ธ 13:47 const deDE = now.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', }); console.log(deDE); // ๐Ÿ‘‰๏ธ 13:47

The output from the toLocaleTimeString is always going to display 2 digits for the hours and minutes, so we don't have to add a leading zero if their values are less than 10.

Further Reading #

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee