Библиотека Day.js

Day.js — современная замена Moment.js с совместимым API и значительно меньшим размером. Для отображения относительного времени используется плагин relativeTime.

Установка и настройка

npm install dayjs
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/ru';

dayjs.extend(relativeTime);
dayjs.locale('ru');

Базовое использование

dayjs(new Date('2025-05-31')).fromNow();           // "день назад"
dayjs(new Date('2025-05-31')).fromNow(true);       // "день" (без "назад")
dayjs(new Date('2025-06-02')).toNow();             // "через день"
dayjs(new Date('2025-01-01')).from(dayjs('2025-06-01')); // "5 месяцев назад"

Сравнение API

Функция timeago.js Day.js
Относительное время format(date, 'ru') dayjs(date).fromNow()
Смена локали на лету format(date, 'de') dayjs(date).locale('de').fromNow()
Кастомная база format(date, 'ru', { relativeDate }) dayjs(date).from(base)
Автообновление DOM render(el) + cancel(el) Нет

Размер бандла

Библиотека Размер (gzip)
timeago.js ~2 KB + ~0.5 KB/локаль
Day.js (core) ~2 KB
Day.js + relativeTime ~3.5 KB
Day.js + locales +0.5-1 KB/локаль

Day.js и timeago.js сопоставимы по размеру.

Подключение нескольких локалей

import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/ru';
import 'dayjs/locale/de';
import 'dayjs/locale/fr';
import 'dayjs/locale/zh-cn';

dayjs.extend(relativeTime);

// Переключение локали для конкретного вызова
dayjs(date).locale('de').fromNow(); // "vor 5 Minuten"
dayjs(date).locale('fr').fromNow(); // "il y a 5 minutes"

Интеграция с React

import { useState, useEffect } from 'react';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/ru';

dayjs.extend(relativeTime);

function useDayjsTimeAgo(date: Date | string, locale = 'ru') {
  const [label, setLabel] = useState(() =>
    dayjs(date).locale(locale).fromNow()
  );

  useEffect(() => {
    const id = setInterval(() => {
      setLabel(dayjs(date).locale(locale).fromNow());
    }, 30_000);
    return () => clearInterval(id);
  }, [date, locale]);

  return label;
}

Конвертация Day.js в timeago.js

Если в проекте смешаны dayjs объекты и timeago.js:

import dayjs from 'dayjs';
import { format } from 'timeago.js';

const d = dayjs('2025-05-31');

// Нельзя напрямую
// format(d, 'ru'); // Некорректно

// Правильно
format(d.toDate(), 'ru');    // Нативный Date
format(d.valueOf(), 'ru');  // timestamp

Сравнение формулировок

dayjs.locale('ru');
const fiveMinAgo = new Date(Date.now() - 5 * 60_000);

dayjs(fiveMinAgo).fromNow();  // "несколько секунд назад" или "5 минут назад"
format(fiveMinAgo, 'ru');     // "5 минут назад"

// Для очень коротких интервалов:
const fifteenSecAgo = new Date(Date.now() - 15_000);
dayjs(fifteenSecAgo).fromNow(); // "несколько секунд назад"
format(fifteenSecAgo, 'ru');    // "только что"

Плагин relativeTime: конфигурация порогов

Day.js позволяет настраивать пороги через конфигурацию плагина:

dayjs.extend(relativeTime, {
  thresholds: [
    { l: 's',  r: 1             },
    { l: 'm',  r: 1             },
    { l: 'mm', r: 59, d: 'minute' },
    { l: 'h',  r: 1             },
    { l: 'hh', r: 23, d: 'hour' },
    { l: 'd',  r: 1             },
    { l: 'dd', r: 29, d: 'day'  },
    { l: 'M',  r: 1             },
    { l: 'MM', r: 11, d: 'month'},
    { l: 'y',  r: 1             },
    { l: 'yy', d: 'year'        },
  ],
});

Когда Day.js предпочтительнее timeago.js

  • В проекте нужна комплексная работа с датами (парсинг, форматирование, арифметика).
  • Мигрируете с Moment.js — API совместим.
  • Не нужна функция render с автоматическими DOM-таймерами.
  • Нужны плагины Day.js (timezone, utc, duration).
Оглавление