Как отобразить только часы, минуты или секунды?

Введение

Часто требуется отображать только определённые компоненты времени. Например, виджет часов может показывать только часы и минуты без секунд. Таймер обратного отсчёта может отображать только секунды. В интерфейсе планирования может быть показан только час встречи.

Когда вы форматируете время с помощью предустановленных стилей, таких как timeStyle: "short", вы получаете набор компонентов, выбранных для локали. Нельзя убрать отдельные части или добавить нужные. Если короткий стиль включает секунды, а вам нужны только часы и минуты, такой пресет не подойдёт.

В JavaScript Intl.DateTimeFormat предоставляет отдельные параметры для каждого компонента времени. Вы можете точно указать, какие части включить и как их форматировать. В этом уроке объясняется, как отображать часы, минуты и секунды по отдельности или в нужных комбинациях.

Понимание компонентов времени

Время состоит из трёх основных компонентов, которые можно форматировать независимо.

hour показывает, который сейчас час. minute показывает, какая минута в этом часе. second показывает, какая секунда в этой минуте.

Каждый компонент принимает значения форматирования, которые определяют его отображение. В объекте options вы указываете только нужные компоненты.

Форматируем только часы

Параметр hour отвечает за отображение компонента часов. Он принимает два значения.

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"

Значение numeric отображает часы без ведущих нулей. Значение 2-digit показывает часы с ведущими нулями, если это необходимо.

В американском английском формат времени использует 12-часовой формат с указателями AM/PM. В других языках и регионах применяются свои правила, о которых рассказывается далее в этом уроке.

Формат только минут

Опция minute отображает только минуты. Она принимает два значения.

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"

Значение numeric показывает минуты без ведущих нулей. Значение 2-digit — с ведущими нулями.

Отображение только минут встречается реже, чем только часов или секунд. Обычно минуты показывают вместе с часами.

Формат только секунд

Опция second отображает только секунды. Она принимает два значения.

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"

Значение numeric показывает секунды без ведущих нулей. Значение 2-digit — с ведущими нулями.

Это удобно для отображения прошедших секунд в счетчике или показа секунд в метке времени.

Комбинирование часов и минут

В большинстве случаев время показывают с часами и минутами. Эти опции можно объединить в одном форматере.

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"

Форматер автоматически добавляет нужные разделители и оформление в зависимости от локали. В американском английском это будет двоеточие и индикатор AM/PM.

Разделитель и порядок указывать не нужно — их определяет локаль.

Комбинирование часов, минут и секунд

Если нужна максимальная точность, можно включить все три компонента времени.

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"

В результате получится полное время с часами, минутами и секундами. Форматер сам расставит все разделители и применит нужные правила.

Комбинирование часов и секунд без минут

Можно также комбинировать часы и секунды без минут, хотя это встречается редко.

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"

Форматтер всё равно выдаёт адекватный результат даже для необычных комбинаций компонентов.

Выбор между числовым и двухзначным форматированием

Разница между numeric и 2-digit особенно важна для однозначных значений.

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"

Формат numeric не добавляет ведущие нули, поэтому получаются значения вроде "8:5:3 AM". Формат 2-digit добавляет ведущие нули, например, "08:05:03 AM".

Для минут и секунд чаще всего используйте 2-digit. Это обеспечивает одинаковую ширину и выравнивание в таблицах, списках или на цифровых часах. Без ведущих нулей время вроде "8:5 AM" выглядит неаккуратно.

Для часов выбор зависит от дизайна. На цифровых часах обычно используют 2-digit для единообразия. В текстах часто применяют numeric для более естественного вида.

Как форматирование часов зависит от локали

В разных локалях используются разные форматы отображения часов. В американском английском — 12-часовой формат с AM/PM. Во многих других странах — 24-часовой формат.

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"

В американском английском 24-часовое значение преобразуется в 12-часовой формат и добавляется "PM". В немецком, французском и японском языках используется 24-часовой формат без AM/PM.

Вы указываете одинаковые параметры для всех локалей. Форматтер автоматически применяет нужный формат времени в зависимости от локали.

Как различаются разделители по локалям

Разделитель между компонентами времени тоже зависит от локали.

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"

В американском английском между компонентами ставятся двоеточия. В финском — точки. Вы не указываете разделитель вручную: форматтер сам выбирает подходящий для каждой локали.

Когда использовать отдельные компоненты времени

Используйте отдельные компоненты времени, если стандартные стили времени не подходят под ваши задачи.

Если вам нужны только часы и минуты, но не секунды, а пресет timeStyle: "short" для вашей локали включает секунды, укажите hour и minute отдельно.

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

Если нужно показывать только часы для упрощённых часов или расписания, используйте только опцию hour.

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

Если нужно показывать прошедшие секунды в таймере или счётчике, используйте только опцию second.

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

Когда лучше использовать стили времени

Если вам нужно полное отображение времени и стандартные стили подходят для вашей локали, используйте вместо этого timeStyle. Пресеты проще и обеспечивают единообразное форматирование для всех локалей.

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

Это автоматически выбирает подходящие компоненты и форматирование без необходимости указывать отдельные параметры.

Используйте отдельные компоненты времени, если вам нужен полный контроль над отображаемыми частями. Используйте стили времени, если хотите стандартное, подходящее для локали форматирование без дополнительной настройки.

Типовые сценарии для отдельных частей времени

Показывайте только часы в интерфейсах для записи на приём, где точные минуты не так важны или задаются отдельно.

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"

Показывайте часы и минуты для большинства виджетов часов и отображения времени, когда точность до секунд не требуется.

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"

Показывайте только секунды для таймеров обратного отсчёта, где важны прошедшие секунды.

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"

Показывайте часы, минуты и секунды для точных временных меток в логах или журналах аудита.

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"

Ограничения при использовании отдельных компонентов

Вы не можете комбинировать отдельные параметры времени, такие как hour, minute или second, с опцией timeStyle. Пресет timeStyle уже определяет, какие компоненты отображаются и как они форматируются.

Так не сработает:

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

Выберите между использованием стилей времени или настройкой отдельных компонентов. Использовать оба варианта нельзя.

Вы можете комбинировать параметры времени с параметрами даты. Это позволяет показывать определённые части даты и времени вместе.

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"

Также можно комбинировать компоненты времени с такими опциями, как timeZone, calendar или 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

Форматируйте время под локаль пользователя

Используйте языковые настройки браузера, чтобы форматировать время в соответствии с ожиданиями каждого пользователя.

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"

Это автоматически применяет нужный формат часов, разделители и индикаторы AM/PM в зависимости от локали пользователя.

Переиспользуйте форматтеры для производительности

Создание экземпляров Intl.DateTimeFormat включает обработку данных локали и параметров. Если нужно форматировать несколько времён с одинаковыми настройками, создайте форматтер один раз и используйте его повторно.

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"

Такой подход ускоряет работу при форматировании массивов времени или отображении большого количества временных меток в интерфейсе.

Что важно помнить

Опции hour, minute и second позволяют показывать отдельные компоненты времени вместо полного времени. Каждая опция принимает значения numeric или 2-digit. Значение numeric убирает ведущие нули. Значение 2-digit включает ведущие нули.

Можно комбинировать несколько опций, чтобы показывать именно те компоненты, которые нужны. Форматтер автоматически расставляет разделители, порядок и форматирование в зависимости от локали.

Формат отображения часов зависит от локали. В некоторых локалях используется 12-часовой формат с указанием AM/PM, в других — 24-часовой без индикаторов. Вы задаёте одинаковые опции для всех локалей, а форматтер применяет нужные правила.

Используйте отдельные компоненты времени, если нужно точно контролировать, какие части отображаются. Используйте стили времени, если нужен стандартный формат. Нельзя совмещать отдельные компоненты и стили времени.

Форматируйте время с учётом локали пользователя из navigator.language, чтобы показывать время так, как ожидает каждый пользователь. Для лучшей производительности используйте один и тот же экземпляр форматтера при форматировании нескольких значений.