Использование в React

Для работы с Moment.js в приложениях на React сначала необходимо установить библиотеку через npm или yarn:

npm install moment
# или
yarn add moment

Импортировать библиотеку в компонент можно следующим образом:

import moment from 'moment';

При необходимости поддержки локализации добавляется соответствующий файл локали:

import 'moment/locale/ru';
moment.locale('ru');

После этого все функции Moment.js будут использовать выбранную локаль для форматирования дат и времени.

Создание и форматирование дат

Moment.js позволяет легко создавать объекты даты. Основные способы:

const now = moment(); // текущая дата и время
const specificDate = moment('2026-05-22'); // дата из строки
const fromComponents = moment([2026, 4, 22, 15, 30]); // [год, месяц (0-11), день, час, минута]

Форматирование осуществляется с помощью метода format:

now.format('YYYY-MM-DD'); // '2026-05-22'
now.format('DD/MM/YYYY'); // '22/05/2026'
now.format('dddd, MMMM Do YYYY, h:mm:ss a'); // 'пятница, Май 22-й 2026, 3:45:12 pm'

Ключевые символы для форматирования:

  • YYYY – полный год
  • MM – месяц с ведущим нулем
  • DD – день с ведущим нулем
  • ddd / dddd – короткое и полное название дня недели
  • HH / hh – часы в 24-часовом и 12-часовом формате
  • mm – минуты
  • ss – секунды
  • a / A – am/pm

Манипуляция датами

Moment.js предоставляет удобные методы для сложения и вычитания времени:

const tomorrow = moment().add(1, 'days'); // добавляет один день
const lastWeek = moment().subtract(7, 'days'); // вычитает 7 дней
const nextMonth = moment().add(1, 'months');
const lastYear = moment().subtract(1, 'years');

Методы add и subtract поддерживают следующие единицы времени: 'years', 'months', 'weeks', 'days', 'hours', 'minutes', 'seconds'.

Сравнение дат

Для сравнения используются функции isBefore, isAfter, isSame:

const start = moment('2026-05-01');
const end = moment('2026-05-22');

start.isBefore(end); // true
end.isAfter(start);  // true
start.isSame('2026-05-01'); // true

Для проверки диапазона используется isBetween:

const date = moment('2026-05-15');
date.isBetween('2026-05-10', '2026-05-20'); // true

Работа с временными зонами и локализацией

По умолчанию Moment.js использует локальное время браузера. Для поддержки UTC и часовых поясов:

const utcTime = moment.utc(); // текущая дата в UTC
const localFromUtc = utcTime.local(); // конвертирование UTC в локальное время

Для более сложной работы с часовыми поясами используется Moment Timezone:

import moment from 'moment-timezone';

const nyTime = moment.tz('2026-05-22 15:00', 'America/New_York');
const moscowTime = nyTime.clone().tz('Europe/Moscow');

Форматирование и отображение в React

Для рендеринга дат в JSX удобно использовать вычисляемые переменные:

function DateDisplay({ date }) {
  const formattedDate = moment(date).format('DD MMMM YYYY, HH:mm');
  return <span>{formattedDate}</span>;
}

Если дата часто обновляется, можно использовать состояние и эффекты:

import { useState, useEffect } from 'react';

function Clock() {
  const [time, setTime] = useState(moment());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(moment());
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return <div>{time.format('HH:mm:ss')}</div>;
}

Такой подход обеспечивает автоматическое обновление времени на экране каждую секунду.

Работа с интервалами и длительностями

Moment.js позволяет работать с временными интервалами через объект duration:

const duration = moment.duration(2, 'hours');
duration.asMinutes(); // 120
duration.add(30, 'minutes'); // добавляем 30 минут
duration.subtract(15, 'minutes'); // вычитаем 15 минут

В React это удобно для отображения таймеров или обратного отсчета:

function Countdown({ endDate }) {
  const [remaining, setRemaining] = useState(moment.duration(moment(endDate).diff(moment())));

  useEffect(() => {
    const interval = setInterval(() => {
      setRemaining(moment.duration(moment(endDate).diff(moment())));
    }, 1000);

    return () => clearInterval(interval);
  }, [endDate]);

  return <div>{remaining.hours()}:{remaining.minutes()}:{remaining.seconds()}</div>;
}

Преобразование строк и парсинг дат

Moment.js умеет парсить строки в различные форматы:

const date1 = moment('22-05-2026', 'DD-MM-YYYY');
const date2 = moment('05/22/2026 15:30', 'MM/DD/YYYY HH:mm');

Для проверки корректности даты используется метод isValid:

const invalidDate = moment('32-05-2026', 'DD-MM-YYYY');
invalidDate.isValid(); // false

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

При работе с React-формами удобно валидировать и форматировать даты перед отправкой на сервер:

function handleSubmit(event) {
  event.preventDefault();
  const inputDate = event.target.date.value; // '22/05/2026'
  const parsedDate = moment(inputDate, 'DD/MM/YYYY');

  if (!parsedDate.isValid()) {
    console.error('Неверная дата');
    return;
  }

  const formatted = parsedDate.format('YYYY-MM-DD');
  console.log('Отправляем на сервер:', formatted);
}

Такой подход гарантирует единый формат данных и упрощает работу с бэкендом.

Сравнение с нативными методами Date

Moment.js значительно упрощает:

  • форматирование (Date требует ручного составления строк);
  • манипуляции датами (Date не имеет методов add и subtract);
  • работу с локалями и часовыми поясами.

Это делает Moment.js особенно полезным в React-приложениях, где данные даты часто отображаются, обновляются и передаются между компонентами.

Оглавление