Первый пример работы

Самый быстрый способ убедиться в работоспособности библиотеки — запустить минимальный пример. Это позволяет сразу увидеть результат, понять базовое API и оценить формат вывода.

Минимальный пример в Node.js

import { format } from 'timeago.js';

const fiveMinutesAgo = Date.now() - 1000 * 60 * 5;

console.log(format(fiveMinutesAgo));

Результат:

5 minutes ago

Этот пример демонстрирует суть библиотеки: передаётся временная метка, возвращается читаемая строка.

Минимальный пример в браузере

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>timeago.js demo</title>
</head>
<body>
  <p id="time"></p>

  <script type="module">
    import { format } from 'https://cdn.skypack.dev/timeago.js';

    const date = new Date();
    date.setMinutes(date.getMinutes() - 10);

    document.getElementById('time').textContent = format(date);
  </script>
</body>
</html>

В браузере на странице появится:

10 minutes ago

Пример с русской локалью

import { format } from 'timeago.js';

const date = new Date();
date.setHours(date.getHours() - 2);

console.log(format(date, 'ru'));

Результат:

2 часа назад

Второй аргумент функции format — код локали. Для русского языка используется 'ru'.

Пример с автообновлением в DOM

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Автообновление</title>
</head>
<body>
  <time id="post-time" datetime="2025-05-26T10:00:00"></time>

  <script type="module">
    import { render } from 'https://cdn.skypack.dev/timeago.js';

    const node = document.getElementById('post-time');
    render(node, 'ru');
  </script>
</body>
</html>

Функция render считывает атрибут datetime, вычисляет разницу с текущим временем и подставляет текст. После этого значение обновляется автоматически без перезагрузки страницы.

Пример с несколькими элементами

<ul>
  <li><time class="ago" datetime="2025-05-26T08:00:00"></time></li>
  <li><time class="ago" datetime="2025-05-25T20:00:00"></time></li>
  <li><time class="ago" datetime="2025-05-20T12:00:00"></time></li>
</ul>

<script type="module">
  import { render } from 'https://cdn.skypack.dev/timeago.js';

  const nodes = document.querySelectorAll('.ago');
  render(nodes, 'ru');
</script>

Все три элемента получат корректные значения относительного времени. Библиотека обрабатывает NodeList целиком — не требуется итерация вручную.

Пример остановки обновления

import { render, cancel } from 'timeago.js';

const nodes = document.querySelectorAll('.ago');

render(nodes);

// Остановить все обновления через 30 секунд
setTimeout(() => {
  cancel();
}, 30000);

Функция cancel останавливает все активные таймеры обновления.

Пример с будущей датой

import { format } from 'timeago.js';

const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);

console.log(format(tomorrow, 'ru'));

Результат:

через 1 день

Библиотека корректно обрабатывает даты как в прошлом, так и в будущем.

Пример регистрации и использования локали

import { format, register } from 'timeago.js';

register('custom_ru', (number, index) => {
  const strings = [
    ['только что', 'прямо сейчас'],
    ['%s сек. назад', 'через %s сек.'],
    ['1 мин. назад', 'через 1 мин.'],
    ['%s мин. назад', 'через %s мин.'],
    ['1 ч. назад', 'через 1 ч.'],
    ['%s ч. назад', 'через %s ч.'],
    ['1 д. назад', 'через 1 д.'],
    ['%s д. назад', 'через %s д.'],
    ['1 нед. назад', 'через 1 нед.'],
    ['%s нед. назад', 'через %s нед.'],
    ['1 мес. назад', 'через 1 мес.'],
    ['%s мес. назад', 'через %s мес.'],
    ['1 г. назад', 'через 1 г.'],
    ['%s л. назад', 'через %s л.'],
  ];
  return strings[index];
});

console.log(format(Date.now() - 1000 * 60 * 45, 'custom_ru'));

Результат:

45 мин. назад

Пример в React

import { format } from 'timeago.js';

function PostDate({ date }) {
  return <time dateTime={date}>{format(date, 'ru')}</time>;
}

export default function App() {
  return (
    <div>
      <PostDate date="2025-05-26T09:00:00" />
    </div>
  );
}

Разбор первого примера по шагам

  1. Функция format импортируется из пакета timeago.js.
  2. В качестве входного значения передаётся дата — строка, timestamp или объект Date.
  3. Библиотека вычисляет разницу между переданной датой и Date.now().
  4. На основе разницы выбирается подходящий интервал (секунды, минуты, часы, дни и т.д.).
  5. Возвращается строка в формате локали.

Всё это происходит за один вызов функции без дополнительных настроек.

Оглавление