Get the GMT Hours using JavaScript

avatar

Borislav Hadzhiev

Sat Jan 15 20223 min read

banner

Photo by Joshua Earle

Get the GMT Hours using JavaScript #

Use the getUTCHours() method to get the GMT hours, e.g. new Date().getUTCHours(). The method returns the hours of the date according to universal time, which shares the same current time with GMT.

index.js
// โœ… Get GMT Hours const gmtHours = new Date().getUTCHours(); console.log(gmtHours); // ๐Ÿ‘‰๏ธ 8 // โœ… Format GMT time as hh:mm:ss function padTo2Digits(num) { return num.toString().padStart(2, '0'); } function getGMTTime(date = new Date()) { return [ padTo2Digits(date.getUTCHours()), padTo2Digits(date.getUTCMinutes()), padTo2Digits(date.getUTCSeconds()), ].join(':'); } console.log(getGMTTime()); // ๐Ÿ‘‰๏ธ๏ธ "08:15:23"

We used the getUTCHours method to get the GMT hours of a specific date.

The method returns an integer between 0 and 23, that represents the hours of the date according to UTC.

GMT and UTC share the same current time.

The difference between them is that GMT is a time zone, whereas UTC is a time standard and is the basis for time zones worldwide.

UTC and GMT don't change for Daylight Saving Time (DST) and always share the same current time.

You can use any of the available getUTC* methods, because they return the date and time components according to universal time (= GMT).

In the second example, we formatted the GMT time as hh:mm:ss.

index.js
// โœ… Format GMT time as hh:mm:ss function padTo2Digits(num) { return num.toString().padStart(2, '0'); } function getGMTTime(date = new Date()) { return [ padTo2Digits(date.getUTCHours()), padTo2Digits(date.getUTCMinutes()), padTo2Digits(date.getUTCSeconds()), ].join(':'); } console.log(getGMTTime()); // ๐Ÿ‘‰๏ธ๏ธ "08:15:23"
The reusable function takes a date object or defaults to the current date and time and returns a string with the GMT time formatted as hh:mm:ss.

The getUTCHours method returns the hour (0 - 23) for the specified date, according to universal time (= GMT).

The getUTCMinutes method returns the minutes (0 - 59) for the date, according to universal time (= GMT).

The getUTCSeconds method returns the seconds (0 - 59) for the date, according to universal time (= GMT).

If you need to use any of the other getUTC* methods, e.g. getUTCMonth, visit the MDN docs.

In the function, we made sure to display the hours, seconds and minutes as 2 digits, even when they are less than 10.

By default, if any of the values is less than 10, the methods return a single digit, which is not what we want.

We padded the results if necessary and joined them with a colon separator.

You can adjust this depending on your use case, e.g. include the year, month, day of the month values in the formatted string.

There is a non-UTC equivalent for each of these methods, for example getUTCFullYear vs getFullYear.

The getUTC* methods return the date or time component according to universal time (= GMT), whereas the get* methods return them according to local time (the time zone the visitor's computer is in).

The get* methods return different results depending on where the user visits your site from.

For example, if you store a local time of midnight (00:00) in your database, you wouldn't know if that's midnight in Tokyo (Japan), in Paris (France), in New York (US), etc. These are all different moments that are hours apart.

For consistency, you should mostly use local time when you have to render a date and time to the user, but store the actual values in UTC (=GMT).

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