How do I display only hours, minutes, or seconds?

Introduction

Time displays often need to show only specific components. A clock widget might show only hours and minutes without seconds. A countdown timer might show only seconds. A scheduling interface might display only the hour of an appointment.

When you format times using preset styles like timeStyle: "short", you get a bundle of components chosen by the locale. You cannot remove individual parts or add specific ones. If the short style includes seconds but you want only hours and minutes, the preset does not work for your needs.

JavaScript's Intl.DateTimeFormat provides individual options for each time component. You can specify exactly which parts to include and how to format each one. This lesson explains how to display hours, minutes, and seconds separately or in specific combinations.

Understanding time components

A time contains three primary components you can format independently.

The hour shows which hour of the day. The minute shows which minute of the hour. The second shows which second of the minute.

Each component accepts formatting values that control how it displays. You include only the components you need in the options object.

Format only hours

The hour option displays the hour component. It accepts two values.

const time = new Date('2025-03-15T14:05:00');

const numeric = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric'
});
console.log(numeric.format(time)); // "2 PM"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  hour: '2-digit'
});
console.log(twoDigit.format(time)); // "02 PM"

The numeric value displays the hour without leading zeros. The 2-digit value displays the hour with leading zeros when needed.

For American English, the formatter uses 12-hour format with AM/PM indicators. Other locales use different conventions, which this lesson covers later.

Format only minutes

The minute option displays the minute component. It accepts two values.

const time = new Date('2025-03-15T14:05:00');

const numeric = new Intl.DateTimeFormat('en-US', {
  minute: 'numeric'
});
console.log(numeric.format(time)); // "5"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  minute: '2-digit'
});
console.log(twoDigit.format(time)); // "05"

The numeric value displays the minute without leading zeros. The 2-digit value displays the minute with leading zeros.

Displaying only minutes is less common than displaying hours or seconds alone. Most time displays combine minutes with hours.

Format only seconds

The second option displays the second component. It accepts two values.

const time = new Date('2025-03-15T14:05:08');

const numeric = new Intl.DateTimeFormat('en-US', {
  second: 'numeric'
});
console.log(numeric.format(time)); // "8"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  second: '2-digit'
});
console.log(twoDigit.format(time)); // "08"

The numeric value displays the second without leading zeros. The 2-digit value displays the second with leading zeros.

This works well for displaying elapsed seconds in a counter or showing the seconds portion of a timestamp.

Combine hours and minutes

Most time displays show both hours and minutes. You can combine these options in a single formatter.

const time = new Date('2025-03-15T14:05:00');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(formatter.format(time)); // "2:05 PM"

The formatter automatically adds appropriate separators and formatting based on the locale. For American English, this produces a colon separator with an AM/PM indicator.

You do not specify the separator or ordering. The locale determines these details.

Combine hours, minutes, and seconds

You can include all three time components when you need complete time precision.

const time = new Date('2025-03-15T14:05:08');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
});
console.log(formatter.format(time)); // "2:05:08 PM"

This produces a full time with hours, minutes, and seconds. The formatter handles all separators and formatting conventions.

Combine hours and seconds without minutes

You can also combine hours and seconds without including minutes, though this is uncommon.

const time = new Date('2025-03-15T14:05:08');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  second: '2-digit'
});
console.log(formatter.format(time)); // "2:08 PM"

The formatter still produces reasonable output even for unusual component combinations.

Choose between numeric and 2-digit formatting

The difference between numeric and 2-digit matters most for single-digit values.

const earlyTime = new Date('2025-03-15T08:05:03');
const lateTime = new Date('2025-03-15T14:35:48');

const numericFormatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
});

const digitFormatter = new Intl.DateTimeFormat('en-US', {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
});

console.log('Numeric:');
console.log(numericFormatter.format(earlyTime)); // "8:5:3 AM"
console.log(numericFormatter.format(lateTime)); // "2:35:48 PM"

console.log('2-digit:');
console.log(digitFormatter.format(earlyTime)); // "08:05:03 AM"
console.log(digitFormatter.format(lateTime)); // "02:35:48 PM"

The numeric format omits leading zeros, producing values like "8:5:3 AM". The 2-digit format includes leading zeros, producing "08:05:03 AM".

Use 2-digit for minutes and seconds in most cases. This ensures consistent width and alignment in tables, lists, or digital clock displays. Without leading zeros, times like "8:5 AM" look irregular.

For hours, the choice depends on your design. Digital clocks often use 2-digit for consistency. Text displays often use numeric for a more natural appearance.

How hour formatting varies by locale

Different locales use different conventions for displaying hours. American English uses 12-hour format with AM/PM indicators. Many other locales use 24-hour format.

const time = new Date('2025-03-15T14:05:00');

const en = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(en.format(time)); // "2:05 PM"

const de = new Intl.DateTimeFormat('de-DE', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(de.format(time)); // "14:05"

const fr = new Intl.DateTimeFormat('fr-FR', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(fr.format(time)); // "14:05"

const ja = new Intl.DateTimeFormat('ja-JP', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(ja.format(time)); // "14:05"

American English converts the 24-hour value to 12-hour format and adds "PM". German, French, and Japanese all use 24-hour format without AM/PM indicators.

You specify the same options for all locales. The formatter automatically applies the appropriate hour format based on locale conventions.

How separators vary by locale

The separator between time components also varies by locale.

const time = new Date('2025-03-15T14:05:08');
const options = {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(time)); // "2:05:08 PM"

const fi = new Intl.DateTimeFormat('fi-FI', options);
console.log(fi.format(time)); // "14.05.08"

American English uses colons between components. Finnish uses periods. You do not specify the separator. The formatter chooses the appropriate separator for each locale.

When to use individual time components

Use individual time components when preset time styles do not match your needs.

If you want hours and minutes but not seconds, and the timeStyle: "short" preset includes seconds for your target locale, specify hour and minute individually.

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});

If you need to display only the hour for a simplified clock or schedule, use only the hour option.

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric'
});

If you need to show elapsed seconds in a timer or counter, use only the second option.

const formatter = new Intl.DateTimeFormat('en-US', {
  second: '2-digit'
});

When to use time styles instead

If you need a complete time display and the preset styles work for your locale, use timeStyle instead. The preset styles are simpler and ensure consistent formatting across locales.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'short'
});

This automatically chooses appropriate components and formatting without requiring you to specify individual options.

Use individual time components when you need precise control over which parts appear. Use time styles when you want standard, locale-appropriate formatting without customization.

Common use cases for specific time parts

Display only hours for appointment scheduling interfaces where the exact minute is less important or handled separately.

const time = new Date('2025-03-15T14:00:00');
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric'
});

console.log(`Meeting at ${formatter.format(time)}`);
// "Meeting at 2 PM"

Display hours and minutes for most clock widgets and time displays where second precision is unnecessary.

const time = new Date('2025-03-15T14:05:00');
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});

console.log(formatter.format(time));
// "2:05 PM"

Display seconds alone for countdown timers that show elapsed seconds.

const time = new Date('2025-03-15T00:00:45');
const formatter = new Intl.DateTimeFormat('en-US', {
  second: '2-digit'
});

console.log(`${formatter.format(time)} seconds remaining`);
// "45 seconds remaining"

Display hours, minutes, and seconds for precise timestamps in logs or audit trails.

const time = new Date('2025-03-15T14:05:08');
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
});

console.log(`Event logged at ${formatter.format(time)}`);
// "Event logged at 2:05:08 PM"

Restrictions when using individual components

You cannot combine individual time component options like hour, minute, or second with the timeStyle option. The timeStyle preset already determines which components appear and how they format.

This will not work:

const formatter = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'short',
  second: '2-digit'  // Error: cannot combine
});

Choose between using time styles or configuring individual components. You cannot use both.

You can combine time component options with date component options. This lets you show specific date parts and specific time parts together.

const formatter = new Intl.DateTimeFormat('en-US', {
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
  minute: '2-digit'
});

const datetime = new Date('2025-03-15T14:05:00');
console.log(formatter.format(datetime));
// "Mar 15, 2:05 PM"

You can also combine time components with options like timeZone, calendar, or numberingSystem.

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  timeZone: 'America/New_York'
});

const time = new Date('2025-03-15T14:05:00Z');
console.log(formatter.format(time));
// Displays time converted to New York timezone

Format times for the user's locale

Use the browser's language preferences to format times according to each user's expectations.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: '2-digit'
});

const time = new Date('2025-03-15T14:05:00');
console.log(formatter.format(time));
// Output varies by user's locale
// For en-US: "2:05 PM"
// For de-DE: "14:05"
// For ja-JP: "14:05"

This automatically applies the appropriate hour format, separators, and AM/PM indicators based on each user's locale.

Reuse formatters for performance

Creating Intl.DateTimeFormat instances involves processing locale data and options. When formatting multiple times with the same settings, create the formatter once and reuse it.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: '2-digit'
});

const times = [
  new Date('2025-03-15T09:00:00'),
  new Date('2025-03-15T14:30:00'),
  new Date('2025-03-15T18:45:00')
];

times.forEach(time => {
  console.log(formatter.format(time));
});
// Output for en-US:
// "9:00 AM"
// "2:30 PM"
// "6:45 PM"

This pattern improves performance when formatting arrays of times or displaying many timestamps in a user interface.

What to remember

The hour, minute, and second options let you display specific time components instead of complete times. Each option accepts numeric or 2-digit values. The numeric value omits leading zeros. The 2-digit value includes leading zeros.

You can combine multiple options to show exactly the components you need. The formatter automatically handles separators, ordering, and formatting based on the locale.

Hour formatting varies by locale. Some locales use 12-hour format with AM/PM indicators. Others use 24-hour format without indicators. You specify the same options for all locales and the formatter applies appropriate conventions.

Use individual time components when you need precise control over which parts appear. Use time styles when you want standard formatting. You cannot combine individual component options with time style options.

Format times using the user's locale from navigator.language to display times according to each user's expectations. Reuse formatter instances when formatting multiple times for better performance.