Как форматировать даты: короткий, средний, длинный и полный стили

Введение

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

В JavaScript Intl.DateTimeFormat есть предустановленные стили, которые объединяют часто используемые варианты форматирования в простые опции. Вместо того чтобы указывать числовой месяц, день и год по отдельности, вы можете выбрать dateStyle: "short". А чтобы не настраивать отображение часов, минут и секунд вручную, просто используйте timeStyle: "medium".

Эти пресеты работают для всех локалей. Один и тот же стиль даст корректный результат для американского английского, немецкого, японского или арабского языков. В этом уроке объясняется, что даёт каждый уровень стиля и когда какой использовать.

Что такое dateStyle и timeStyle

Опция dateStyle определяет, как будет выглядеть дата. Она влияет на то, какие компоненты даты отображаются и насколько подробно. Можно выбрать один из четырёх вариантов: "short", "medium", "long" и "full".

Опция timeStyle определяет, как будет отображаться время. Она влияет на то, какие компоненты времени показываются и насколько подробно. Можно выбрать те же четыре варианта: "short", "medium", "long" и "full".

Обе опции позволяют быстро задать сразу несколько параметров форматирования. Когда вы выбираете стиль, форматтер автоматически подбирает подходящие значения для таких компонентов, как день недели, месяц, число, год, часы, минуты, секунды и название часового пояса — всё с учётом локали.

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

console.log(formatter.format(new Date("2025-03-15")));
// Output: "3/15/25"

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

Понимание четырёх уровней стилей

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

Стиль "short" создаёт компактный вывод, подходящий для ограниченного пространства. Обычно используются числовые форматы и опускается дополнительная информация, например, названия дней недели.

Стиль "medium" даёт средний уровень детализации. Часто включает сокращённые названия месяцев и сбалансированную точность времени.

Стиль "long" добавляет больше контекста. Обычно полностью прописывает названия месяцев и включает дополнительные компоненты, такие как информация о часовом поясе.

Стиль "full" даёт максимально полное представление. Включает все важные компоненты: названия дней недели, полные названия месяцев и полные названия часовых поясов.

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

Форматирование дат с помощью dateStyle

Опция dateStyle управляет форматированием даты. Каждый уровень стиля даёт разный результат для одной и той же даты.

const date = new Date("2025-03-15T14:30:00");

const shortFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "short"
});

const mediumFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium"
});

const longFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long"
});

const fullFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "full"
});

console.log(shortFormatter.format(date));
// Output: "3/15/25"

console.log(mediumFormatter.format(date));
// Output: "Mar 15, 2025"

console.log(longFormatter.format(date));
// Output: "March 15, 2025"

console.log(fullFormatter.format(date));
// Output: "Saturday, March 15, 2025"

Краткий стиль использует только числа, делая формат максимально компактным. Средний стиль сокращает название месяца. Длинный стиль полностью прописывает месяц. Полный стиль добавляет название дня недели для полного контекста.

Форматирование времени с помощью timeStyle

Опция timeStyle управляет форматированием времени. Каждый уровень стиля показывает разные компоненты времени.

const date = new Date("2025-03-15T14:30:45");

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

const mediumFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "medium"
});

const longFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "long"
});

const fullFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "full"
});

console.log(shortFormatter.format(date));
// Output: "2:30 PM"

console.log(mediumFormatter.format(date));
// Output: "2:30:45 PM"

console.log(longFormatter.format(date));
// Output: "2:30:45 PM PST"

console.log(fullFormatter.format(date));
// Output: "2:30:45 PM Pacific Standard Time"

Краткий стиль отображает только часы и минуты. Средний стиль добавляет секунды. Длинный стиль включает сокращённое название часового пояса. Полный стиль полностью прописывает название часового пояса.

Комбинирование dateStyle и timeStyle

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

const date = new Date("2025-03-15T14:30:45");

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

console.log(formatter.format(date));
// Output: "March 15, 2025 at 2:30 PM"

Дата отображается в длинном формате, а время — в кратком. Такой вариант даёт подробный контекст даты, но время остаётся лаконичным.

Можно комбинировать любой стиль даты с любым стилем времени — как вам удобно.

const date = new Date("2025-03-15T14:30:45");

const combinations = [
  { dateStyle: "short", timeStyle: "short" },
  { dateStyle: "medium", timeStyle: "medium" },
  { dateStyle: "long", timeStyle: "long" },
  { dateStyle: "full", timeStyle: "full" }
];

combinations.forEach(options => {
  const formatter = new Intl.DateTimeFormat("en-US", options);
  console.log(formatter.format(date));
});

// Output:
// "3/15/25, 2:30 PM"
// "Mar 15, 2025, 2:30:45 PM"
// "March 15, 2025 at 2:30:45 PM PST"
// "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"

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

Как стили дат различаются в разных локалях

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

const date = new Date("2025-03-15T14:30:00");

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.DateTimeFormat(locale, {
    dateStyle: "short"
  });

  const fullFormatter = new Intl.DateTimeFormat(locale, {
    dateStyle: "full"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(date)}`);
  console.log(`  Full:  ${fullFormatter.format(date)}`);
});

// Output:
// en-US:
//   Short: 3/15/25
//   Full:  Saturday, March 15, 2025
// de-DE:
//   Short: 15.03.25
//   Full:  Samstag, 15. März 2025
// fr-FR:
//   Short: 15/03/2025
//   Full:  samedi 15 mars 2025
// ja-JP:
//   Short: 2025/03/15
//   Full:  2025年3月15日土曜日

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

Как стили времени различаются в разных локалях

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

const date = new Date("2025-03-15T14:30:45");

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.DateTimeFormat(locale, {
    timeStyle: "short"
  });

  const longFormatter = new Intl.DateTimeFormat(locale, {
    timeStyle: "long"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(date)}`);
  console.log(`  Long:  ${longFormatter.format(date)}`);
});

// Output:
// en-US:
//   Short: 2:30 PM
//   Long:  2:30:45 PM PST
// de-DE:
//   Short: 14:30
//   Long:  14:30:45 PST
// fr-FR:
//   Short: 14:30
//   Long:  14:30:45 UTC−8
// ja-JP:
//   Short: 14:30
//   Long:  14:30:45 PST

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

Когда использовать краткий стиль

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

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "short"
});

const events = [
  { name: "Team meeting", date: new Date("2025-03-15") },
  { name: "Project deadline", date: new Date("2025-03-28") },
  { name: "Conference", date: new Date("2025-04-05") }
];

events.forEach(event => {
  console.log(`${event.name}: ${formatter.format(event.date)}`);
});

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

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

Средний стиль — это баланс между детализацией и экономией места. Он даёт больше контекста, чем краткий стиль, но не такой подробный, как длинный или полный. Это делает его подходящим для большинства стандартных случаев отображения даты и времени.

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "medium"
});

const milestone = new Date("2025-03-15");
console.log(`Project completion: ${formatter.format(milestone)}`);
// Output: "Project completion: Mar 15, 2025"

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

Когда использовать длинный стиль

Длинный стиль даёт больше деталей, но не такой подробный, как полный. Информация пишется полностью, но без дополнительных компонентов, например, названий дней недели.

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "long"
});

const releaseDate = new Date("2025-03-15");
console.log(`Release date: ${formatter.format(releaseDate)}`);
// Output: "Release date: March 15, 2025"

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  timeStyle: "long",
  timeZone: "America/New_York"
});

const callTime = new Date("2025-03-15T14:30:00");
console.log(`Conference call: ${formatter.format(callTime)}`);
// Output: "Conference call: 2:30:45 PM EST"

Когда использовать полный стиль

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

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "full"
});

const appointmentDate = new Date("2025-03-15");
console.log(`Appointment: ${formatter.format(appointmentDate)}`);
// Output: "Appointment: Saturday, March 15, 2025"

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "full",
  timeStyle: "full"
});

const eventTime = new Date("2025-03-15T14:30:00");
console.log(formatter.format(eventTime));
// Output: "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"

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

Понимание ограничений

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

Так работать не будет:

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium",
  weekday: "long"  // Error: cannot combine
});

Опция dateStyle уже определяет форматирование дня недели. Добавление явной опции weekday создаёт конфликт. Такое же ограничение действует для timeStyle с компонентами вроде hour, minute или second.

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

const formatter = new Intl.DateTimeFormat("en-US", {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric"
});

console.log(formatter.format(new Date("2025-03-15")));
// Output: "Saturday, March 15, 2025"

Вы можете использовать dateStyle и timeStyle вместе, потому что они отвечают за разные аспекты форматирования. Их также можно комбинировать с опциями, которые не конфликтуют, например, timeZone, calendar или numberingSystem.

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long",
  timeStyle: "long",
  timeZone: "America/New_York"
});

console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// Output: "March 15, 2025 at 2:30:45 PM EST"

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

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "long",
  timeStyle: "short"
});

const date = new Date("2025-03-15T14:30:00");
console.log(formatter.format(date));
// Output varies by user's locale
// For en-US: "March 15, 2025 at 2:30 PM"
// For de-DE: "15. März 2025 um 14:30"
// For fr-FR: "15 mars 2025 à 14:30"

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

const formatter = new Intl.DateTimeFormat(navigator.languages, {
  dateStyle: "medium"
});

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

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "medium",
  timeStyle: "short"
});

const events = [
  new Date("2025-03-15T14:30:00"),
  new Date("2025-03-16T10:00:00"),
  new Date("2025-03-17T16:45:00")
];

events.forEach(date => {
  console.log(formatter.format(date));
});
// Output:
// "Mar 15, 2025, 2:30 PM"
// "Mar 16, 2025, 10:00 AM"
// "Mar 17, 2025, 4:45 PM"

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

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

Опции dateStyle и timeStyle предоставляют предустановленные уровни форматирования: "short", "medium", "long" и "full". Каждый уровень — это разный баланс между краткостью и детализацией: short — самый компактный, full — самый подробный.

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

Можно использовать dateStyle и timeStyle вместе, но их нельзя комбинировать с отдельными опциями компонентов, такими как weekday или hour. Выбирайте между предустановленными стилями для простоты или отдельными компонентами для более тонкой настройки.

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