Календарное представление дат в Day.js реализуется через механизм
форматирования, при котором дата отображается не как абсолютное значение
(например, 2026-05-22 14:30), а как контекстное выражение
относительно текущего момента: «сегодня в 14:30», «вчера в 18:00», «на
прошлой неделе», «в следующий понедельник». Такой подход повышает
читаемость временных меток в пользовательских интерфейсах и широко
применяется в лентах событий, чатах, уведомлениях и логах
активности.
Для работы с календарным форматом используется плагин
calendar, который расширяет базовый функционал Day.js и
опирается на вычисление разницы между датами и правила форматирования,
зависящие от локали и конфигурации.
Day.js не включает календарное представление по умолчанию, поэтому требуется явная активация расширения.
import dayjs from 'dayjs'
import calendar from 'dayjs/plugin/calendar'
dayjs.extend(calendar)После подключения становится доступен метод
.calendar().
Метод .calendar() преобразует дату в человекочитаемую
строку относительно текущего момента времени.
dayjs().calendar()Примеры типичного вывода:
Поведение зависит от локали и внутренних правил форматирования.
Передача конкретной даты:
const date = dayjs('2026-05-20 14:00')
date.calendar()Календарное представление основывается на сравнении даты с текущим моментом и разделении на несколько интервалов:
Эти правила не фиксированы жёстко и могут изменяться через локаль.
Day.js использует набор шаблонов, определяющих, как отображать разные временные интервалы:
Пример логики шаблонов:
dayjs.extend(calendar, {
sameDay: '[Today at] HH:mm',
nextDay: '[Tomorrow at] HH:mm',
lastDay: '[Yesterday at] HH:mm',
nextWeek: 'dddd [at] HH:mm',
lastWeek: '[Last] dddd [at] HH:mm',
sameElse: 'DD/MM/YYYY'
})Календарное представление тесно связано с локалями. При подключении локализованных правил строки меняются автоматически.
import 'dayjs/locale/ru'
dayjs.locale('ru')После установки русской локали:
dayjs().calendar()может возвращать:
Локали содержат предустановленные правила для календаря, включая грамматические формы дней недели и предлоги времени.
Переопределение поведения календаря возможно через объект
calendar внутри локали.
dayjs.locale('custom', {
calendar: {
sameDay: '[Сегодня в] HH:mm',
nextDay: '[Завтра в] HH:mm',
nextWeek: 'dddd [в] HH:mm',
lastDay: '[Вчера в] HH:mm',
lastWeek: '[Прошлая неделя] dddd [в] HH:mm',
sameElse: 'DD.MM.YYYY'
}
})После этого все вызовы .calendar() используют заданные
правила.
Метод .calendar() может принимать аргумент — дату,
относительно которой производится сравнение.
const base = dayjs('2026-05-22 12:00')
const target = dayjs('2026-05-21 18:00')
target.calendar(base)Это позволяет строить календарное представление не относительно текущего времени, а относительно произвольного момента, что важно для анализа исторических данных и построения отчетов.
Календарное представление часто путают с относительным временем
(fromNow()), однако между ними есть принципиальная
разница:
dayjs().subtract(2, 'hour').calendar() // "Today at 10:00"
dayjs().subtract(2, 'hour').fromNow() // "2 hours ago"Calendar сохраняет точное время, но добавляет контекст, тогда как fromNow описывает только разницу.
Определение «прошлой недели» и «следующей недели» зависит от настройки начала недели (понедельник или воскресенье), которая задаётся локалью.
import 'dayjs/locale/en-gb'
dayjs.locale('en-gb')В разных локалях:
Это влияет на то, какие даты попадают в lastWeek и
nextWeek.
Day.js позволяет задавать функцию для полного контроля над форматом.
dayjs.extend(calendar, {
sameDay: (now) => `[Сегодня в] ${now.format('HH:mm')}`,
lastDay: (now) => `[Вчера в] ${now.format('HH:mm')}`,
lastWeek: (now) => `[Прошлая неделя] ${now.format('dddd HH:mm')}`,
sameElse: (now) => now.format('DD.MM.YYYY')
})Функция получает текущую дату контекста и может возвращать динамическую строку с любой логикой форматирования.
Calendar-представление зависит от локального времени исполнения. При
использовании плагинов для временных зон (например, utc и
timezone) важно учитывать, что классификация
«сегодня/вчера» выполняется уже после преобразования времени.
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'
dayjs.extend(utc)
dayjs.extend(timezone)
const date = dayjs.tz('2026-05-22 00:30', 'Asia/Almaty')
date.calendar()Без корректного учета временной зоны возможно смещение даты в категорию «вчера» или «завтра».
Разные наборы правил дают различное восприятие времени:
sameDay: 'HH:mm',
lastDay: 'HH:mm вчера',
sameElse: 'DD.MM'Используется в компактных интерфейсах, где пространство ограничено.
sameDay: '[Сегодня в] HH:mm:ss',
lastWeek: '[В прошлый] dddd [в] HH:mm:ss',
sameElse: 'dddd, DD MMMM YYYY'Используется в логах и административных панелях.
При использовании строковых шаблонов квадратные скобки
[] используются для экранирования текста:
'[Today at] HH:mm'Все символы внутри скобок выводятся буквально, а вне их интерпретируются как формат времени.
Если плагин calendar не подключен, вызов:
dayjs().calendar()приводит к ошибке:
calendar is not a functionили отсутствию метода в зависимости от сборки. Это делает
обязательным явное расширение функционала через extend.
Локали управляют не только переводом слов, но и грамматическими формами:
Пример:
Эти различия задаются внутри локализационных файлов Day.js и могут быть переопределены при кастомизации.
Календарное представление применяется в структурах, где важна быстрая интерпретация времени:
При этом сохраняется точность временной метки, что позволяет использовать значение и для сортировки, и для отображения.
Часто календарное представление дополняется стандартным форматированием:
const d = dayjs('2026-05-20 14:00')
`${d.calendar()} (${d.format('YYYY-MM-DD HH:mm')})`Такой подход объединяет человекочитаемую форму и строгую временную метку, пригодную для логирования и аналитики.