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

Введение

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

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")));
// Вывод: "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));
// Вывод: "3/15/25"

console.log(mediumFormatter.format(date));
// Вывод: "Mar 15, 2025"

console.log(longFormatter.format(date));
// Вывод: "March 15, 2025"

console.log(fullFormatter.format(date));
// Вывод: "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));
// Результат: "2:30 PM"

console.log(mediumFormatter.format(date));
// Результат: "2:30:45 PM"

console.log(longFormatter.format(date));
// Результат: "2:30:45 PM PST"

console.log(fullFormatter.format(date));
// Результат: "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));
// Результат: "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));
});

// Результат:
// "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)}`);
});

// Результат:
// 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)}`);
});

// Результат:
// 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: "Командная встреча", date: new Date("2025-03-15") },
  { name: "Крайний срок проекта", date: new Date("2025-03-28") },
  { name: "Конференция", 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(`Завершение проекта: ${formatter.format(milestone)}`);
// Вывод: "Завершение проекта: 15 мар. 2025 г."

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

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

Длинный стиль предоставляет дополнительные детали, не становясь таким многословным, как полный стиль. Он полностью прописывает информацию, исключая дополнительные компоненты, такие как названия дней недели.

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

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

const releaseDate = new Date("2025-03-15");
console.log(`Дата выпуска: ${formatter.format(releaseDate)}`);
// Вывод: "Дата выпуска: 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(`Конференц-звонок: ${formatter.format(callTime)}`);
// Вывод: "Конференц-звонок: 14:30:45 EST"

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

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

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

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

const appointmentDate = new Date("2025-03-15");
console.log(`Встреча: ${formatter.format(appointmentDate)}`);
// Вывод: "Встреча: суббота, 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));
// Вывод: "суббота, 15 марта 2025 г., 14:30:45 по тихоокеанскому стандартному времени"

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

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

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

Это не будет работать:

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium",
  weekday: "long"  // Ошибка: нельзя комбинировать
});

Опция 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")));
// Вывод: "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")));
// Вывод: "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));
// Вывод зависит от локали пользователя
// Для en-US: "March 15, 2025 at 2:30 PM"
// Для de-DE: "15. März 2025 um 14:30"
// Для 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));
});
// Результат:
// "15 мар. 2025 г., 14:30"
// "16 мар. 2025 г., 10:00"
// "17 мар. 2025 г., 16:45"

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

Что нужно помнить

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

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

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

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