Форматы даты: короткий, средний, длинный, полный

В FormatJS форматирование дат строится поверх стандарта Intl.DateTimeFormat, где базовая идея заключается в абстракции уровней детализации представления даты. Ключевыми предустановками являются четыре стиля: короткий, средний, длинный и полный. Они определяют не только набор отображаемых компонентов (день, месяц, год, время), но и степень формальности, а также локализацию текстовых элементов.

В основе работы лежит сопоставление параметра dateStyle с внутренними настройками Intl.DateTimeFormat. При использовании react-intl или низкоуровневого API FormatJS разработчик фактически выбирает один из предопределённых уровней детализации, делегируя остальную работу движку интернационализации браузера или полифила.

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

  • формат структуры (порядок день/месяц/год)
  • языковая форма месяца
  • наличие сокращений
  • использование пунктуации и разделителей
  • формат времени (12/24 часа)

Короткий формат (short)

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

Типичная конфигурация:

new Intl.DateTimeFormat('en-US', { dateStyle: 'short' })

Примеры вывода:

  • 12/31/2026 (en-US)
  • 31.12.2026 (de-DE)
  • 31/12/2026 (en-GB)

Особенности:

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

В react-intl:

<FormattedDate value={date} dateStyle="short" />

Средний формат (medium)

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

Пример конфигурации:

new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' })

Примеры вывода:

  • Dec 31, 2026
  • 31 Dec 2026
  • 2026年12月31日 (ja-JP)

Особенности:

  • сокращённые названия месяцев
  • читаемость без потери компактности
  • устойчивость к локализации

Использование в FormatJS:

<FormattedDate value={date} dateStyle="medium" />

Средний формат часто становится компромиссом между UI-ограничениями и человеческим восприятием.

Длинный формат (long)

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

Конфигурация:

new Intl.DateTimeFormat('en-US', { dateStyle: 'long' })

Примеры:

  • December 31, 2026
  • 31 December 2026
  • 31 décembre 2026 (fr-FR)

Особенности:

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

FormatJS:

<FormattedDate value={date} dateStyle="long" />

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

Полный формат (full)

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

Конфигурация:

new Intl.DateTimeFormat('en-US', { dateStyle: 'full' })

Примеры:

  • Thursday, December 31, 2026
  • Donnerstag, 31. Dezember 2026
  • четверг, 31 декабря 2026 г.

Особенности:

  • включение дня недели
  • максимальная семантическая полнота
  • высокая локализационная зависимость
  • значительная длина строки

FormatJS:

<FormattedDate value={date} dateStyle="full" />

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

Сравнение уровней детализации

Различие между стилями определяется не только количеством символов, но и уровнем информации:

  • short — идентификатор даты
  • medium — универсальное отображение
  • long — текстовое представление с высокой читаемостью
  • full — контекстуализированная дата с временной привязкой к неделе

Эти уровни формируют градацию от машинного представления к человеческому восприятию.

Локализация и зависимость от культуры

FormatJS не фиксирует шаблоны, а делегирует форматирование локали. Один и тот же стиль может радикально отличаться:

Локаль short medium long full
en-US 12/31/2026 Dec 31, 2026 December 31, 2026 Thursday, December 31, 2026
de-DE 31.12.2026 31. Dez. 2026 31. Dezember 2026 Donnerstag, 31. Dezember 2026
ja-JP 2026/12/31 2026/12/31 2026年12月31日 2026年12月31日木曜日

Таким образом, стили задают уровень детализации, но не формат строки.

Использование в сложных сценариях

В реальных приложениях стили часто комбинируются с временными параметрами:

new Intl.DateTimeFormat('en-US', {
  dateStyle: 'long',
  timeStyle: 'short'
})

Это позволяет строить гибридные представления вроде:

  • December 31, 2026 at 5:30 PM

FormatJS сохраняет консистентность этих комбинаций через единый API react-intl:

<FormattedDate
  value={date}
  dateStyle="full"
  timeStyle="short"
/>

Влияние полифилов и окружения

Поведение стилей зависит от реализации Intl:

  • современные браузеры используют ICU данные системы
  • Node.js зависит от собранной ICU-библиотеки
  • полифилы FormatJS могут расширять поддержку локалей

Это влияет на:

  • доступность локалей
  • точность названий месяцев
  • поддержку редких календарей

Семантическая роль стилей

Каждый стиль следует рассматривать как уровень абстракции:

  • short — для системных интерфейсов
  • medium — для пользовательских списков
  • long — для документов
  • full — для событий и календарей

Такое разделение позволяет унифицировать UX без ручного управления строковыми шаблонами, делегируя форматирование международным стандартам ICU и API FormatJS.

Оглавление