Стили отображения даты

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

Основные стили задаются через параметры dateStyle и timeStyle. Эти опции появились как высокоуровневая альтернатива детальной настройке через year, month, day, weekday и другие поля.

const formatter = new Intl.DateTimeFormat('ru-RU', {
  dateStyle: 'long'
});

console.log(formatter.format(new Date()));

Поддерживаемые значения dateStyle:

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

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

Полный стиль (full)

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

const f = new Intl.DateTimeFormat('ru-RU', {
  dateStyle: 'full'
});

console.log(f.format(new Date()));

В русской локали результат обычно выглядит так:

вторник, 26 мая 2026 г.

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

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

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

Длинный стиль (long)

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

const f = new Intl.DateTimeFormat('ru-RU', {
  dateStyle: 'long'
});

console.log(f.format(new Date()));

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

26 мая 2026 г.

Характерные особенности:

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

Средний стиль (medium)

Средний стиль балансирует между читаемостью и компактностью.

const f = new Intl.DateTimeFormat('ru-RU', {
  dateStyle: 'medium'
});

console.log(f.format(new Date()));

Пример:

26 мая 2026 г.

В разных локалях этот стиль может различаться сильнее, чем long, так как допускается сокращение названий месяцев или изменение порядка элементов.

Характерные особенности:

  • сокращённые или полуформальные формы месяца
  • компактная запись
  • универсальность для UI-компонентов

Краткий стиль (short)

Краткий стиль ориентирован на максимальную компактность и часто использует только цифры.

const f = new Intl.DateTimeFormat('ru-RU', {
  dateStyle: 'short'
});

console.log(f.format(new Date()));

Пример:

26.05.2026

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

  • числовой формат даты
  • минимальный объём текста
  • подходит для таблиц, списков, логов
  • может существенно различаться между локалями (например, MM/DD/YYYY vs DD.MM.YYYY)

Стили времени: timeStyle

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

const f = new Intl.DateTimeFormat('ru-RU', {
  timeStyle: 'short'
});

console.log(f.format(new Date()));

Основные значения:

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

Пример full:

14:32:10 GMT+3

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

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

const f = new Intl.DateTimeFormat('ru-RU', {
  dateStyle: 'long',
  timeStyle: 'short'
});

console.log(f.format(new Date()));

Результат:

26 мая 2026 г., 14:32

Особенности комбинирования:

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

Тонкая настройка без dateStyle и timeStyle

При необходимости большей гибкости используются низкоуровневые опции:

const f = new Intl.DateTimeFormat('ru-RU', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

console.log(f.format(new Date()));

Результат:

вторник, 26 мая 2026 г.

Основные параметры:

  • weekday — день недели (long, short, narrow)
  • year — год (numeric, 2-digit)
  • month — месяц (numeric, 2-digit, long, short, narrow)
  • day — день месяца
  • hour, minute, second — компоненты времени

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

Влияние локали на стили отображения

Локаль определяет не только язык, но и правила форматирования даты.

const ru = new Intl.DateTimeFormat('ru-RU', { dateStyle: 'full' });
const en = new Intl.DateTimeFormat('en-US', { dateStyle: 'full' });

const date = new Date();

console.log(ru.format(date));
console.log(en.format(date));

Типичные различия:

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

Поведение при отсутствии поддержки стилей

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

Эквивалентная настройка для dateStyle: 'short' может интерпретироваться как:

{
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
}

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

Практические сценарии применения

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

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

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

Оглавление