Отображение дат в интерфейсе

В пользовательских интерфейсах отображение дат требует баланса между читаемостью, локализацией и компактностью представления. Библиотека Day.js предоставляет набор инструментов для преобразования объектов времени в строки, подходящие для UI-компонентов: списков, карточек, таймлайнов, уведомлений и журналов событий.

Базовая операция выполняется через метод форматирования:

dayjs().format('YYYY-MM-DD HH:mm')

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

  • YYYY — полный год
  • MM — месяц с ведущим нулём
  • DD — день месяца
  • HH — часы (24-часовой формат)
  • mm — минуты

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

Шаблоны отображения и визуальная иерархия

В интерфейсах часто используется разделение форматов по уровню важности информации. Например:

dayjs().format('DD.MM.YYYY')
dayjs().format('DD MMMM YYYY')
dayjs().format('ddd, D MMM YYYY')

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

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

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

Локализация и языковые настройки

Для корректного отображения дат в разных языках используется модуль локализации:

import 'dayjs/locale/ru'
dayjs.locale('ru')

После установки локали изменяется поведение:

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

Пример:

dayjs().format('D MMMM YYYY')

В русской локали: 23 мая 2026

В английской локали: 23 May 2026

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

Относительное время и динамическое отображение

Для интерфейсов лент и уведомлений часто применяется относительное время. В Day.js это реализуется через плагин relativeTime.

import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(relativeTime)

dayjs().fromNow()

Результаты:

  • «несколько секунд назад»
  • «5 минут назад»
  • «2 дня назад»

Такой формат снижает когнитивную нагрузку и делает интерфейс более «живым».

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

dayjs('2026-01-01').from(dayjs('2025-12-31'))

Контекстное отображение через calendar()

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

import calendar from 'dayjs/plugin/calendar'
dayjs.extend(calendar)
dayjs().calendar()

Типичные варианты вывода:

  • «Сегодня в 14:00»
  • «Вчера в 18:30»
  • «12.05.2026»

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

Обработка пользовательских форматов

UI часто требует нестандартных комбинаций полей даты. Day.js поддерживает кастомные шаблоны без дополнительной логики:

dayjs().format('YYYY/MM/DD [at] HH:mm')

Квадратные скобки фиксируют текстовые вставки, не являющиеся токенами.

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

dayjs().format('ddd, DD MMM • HH:mm')

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

Безопасное отображение отсутствующих значений

В интерфейсах часто встречаются неопределённые даты: незаполненные поля, необязательные события, черновики. Day.js возвращает объект даты даже при некорректных входных данных, поэтому требуется дополнительная проверка:

const date = dayjs(input)

date.isValid() ? date.format('DD.MM.YYYY') : '—'

Для UI это критично, так как некорректное отображение может ломать визуальную структуру компонентов.

Оптимизация отображения в списках и таблицах

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

const formatted = items.map(item => ({
  ...item,
  dateLabel: dayjs(item.date).format('DD.MM.YYYY')
}))

Дополнительная оптимизация достигается за счёт:

  • кеширования локали
  • избегания повторных вызовов format() в render-функциях
  • хранения уже отформатированных строк в состоянии

Форматы для разных типов интерфейсов

Разные UI-паттерны требуют различных стратегий отображения:

Табличные представления

Короткий и строгий формат:

dayjs().format('YYYY-MM-DD')

Карточки и ленты

Умеренно читаемый формат:

dayjs().format('DD MMM YYYY, HH:mm')

Таймлайны

Комбинированный формат с контекстом:

dayjs().calendar()

Уведомления

Относительное время:

dayjs().fromNow()

Работа с часовыми поясами в UI

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

import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'

dayjs.extend(utc)
dayjs.extend(timezone)

dayjs().tz('Asia/Almaty').format('HH:mm')

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

Унификация форматов в дизайн-системе

В крупных интерфейсах форматирование дат выносится в отдельный слой — утилиту или сервис:

const formatDate = (date) =>
  dayjs(date).format('DD MMM YYYY')

const formatDateTime = (date) =>
  dayjs(date).format('DD MMM YYYY, HH:mm')

const formatRelative = (date) =>
  dayjs(date).fromNow()

Такой подход обеспечивает:

  • единообразие отображения
  • централизованное изменение форматов
  • отсутствие дублирования логики в компонентах

Адаптивное представление времени

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

const formatSmart = (date) => {
  const d = dayjs(date)

  if (d.isSame(dayjs(), 'day')) return d.format('HH:mm')
  if (d.isSame(dayjs(), 'year')) return d.format('DD MMM')
  return d.format('DD.MM.YYYY')
}

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

Оглавление