Use toLocaleTimeString() without displaying Seconds in JS

avatar

Borislav Hadzhiev

Last updated: Jan 27, 2022

banner

Photo from Unsplash

Use toLocaleTimeString() without displaying Seconds in JS #

To use the toLocaleTimeString() method without displaying seconds, set the hour and minute parameters in the method's options object, e.g. date.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}).

index.js
const date = new Date(); // ✅ Using visitor's default locale console.log( date.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}) ); // ✅ Using US locale console.log( date.toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit'}), ); // 👉️ 11:48 AM // 👇️ 01/27/2022, 12:10 PM console.log( date.toLocaleTimeString([], { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', }), );

The toLocaleTimeString method returns a string with language sensitive representation displaying the time for the given date.

The toLocaleTimeString methods takes the following 2 parameters:

  1. locales - a string with a BCP 47 language tag or an array of such strings. You can use any of the available locales, e.g. es-MX for Mexico or en-CA for Canada. If you need more information about this parameter, check out the MDN docs.
  2. options - an object where we can adjust the formatting for the time. Read more about the options object in the MDN docs.
In the first example, we set the locales parameter to an empty object, meaning - use the visitor's default locale.

In the second example, we set the locale to en-US to display the time according to the US locale, regardless of the visitor's preferences.

We set the hour and minute properties on the options object to 2-digit, so the time is always displayed using 2 digits for the hours and minutes, even if their values are 1 digit only (less than 10).

The other possible value for the hour and minute properties is numeric (e.g. 3), which would display the hours and minutes using a single digit if their values are less than 10.

The seconds are not displayed because we didn't set the seconds property in the options object.

The seconds property can also be set to numeric or 2-digit.

You can also display the date, by setting the year, month and day properties in the options object.

index.js
// 👇️ 1/27/2022, 12:10 PM console.log( date.toLocaleTimeString([], { year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit', }), );

The month and day properties can also be set to 2-digit to format them as 2 digits, even if the month or day values are less than 10.

index.js
const date = new Date(); // 👇️ 01/27/2022, 12:10 PM console.log( date.toLocaleTimeString([], { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', }), );

If you need to get the value in a different locale, change the first parameter to the specific locale, e.g. en-US or de-DE.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.