Use toLocaleTimeString() without displaying Seconds in JS

# 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.

index.js

Copied!
const date = new Date();

// ✅ Using visitor's default locale
console.log(
  date.toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit',
  }),
); // 👉️ 05:36 PM

// ✅ Using US locale
console.log(
  date.toLocaleTimeString('en-US', {
    hour: '2-digit',
    minute: '2-digit',
  }),
); // 👉️ 05:36 PM

// 👇️ 07/28/2023, 05:36 PM
console.log(
  date.toLocaleTimeString([], {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  }),
);

use tolocaletimestring without displaying seconds

The code for this article is available on GitHub

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

The toLocaleTimeString method takes the following 2 parameters:

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.
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 array to use the visitor's default locale.

index.js

Copied!
const date = new Date();

// ✅ Using visitor's default locale
console.log(
  date.toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit',
  }),
);

display date by setting year month day properties

The code for this article is available on GitHub

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.

index.js

Copied!
const date = new Date();

// ✅ Using US locale
console.log(
  date.toLocaleTimeString('en-US', {
    hour: '2-digit',
    minute: '2-digit',
  }),
); // 👉️ 05:41 PM

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

Copied!
const date = new Date();

// 👇️ 7/28/2023, 05:39 PM
console.log(
  date.toLocaleTimeString([], {
    year: 'numeric',
    month: 'numeric',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  }),
);

The code for this article is available on GitHub

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

Copied!
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.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Use toLocaleTimeString() without displaying Seconds in JS

# Use toLocaleTimeString() without displaying Seconds in JS

# Additional Resources

Borislav Hadzhiev