Управление датой и временем в React с Moment.js

Moment.js — лёгкая и интуитивно понятная библиотека для работы с датами и временем в JavaScript. В этом руководстве описано, как установить Moment.js в проект React, отображать и изменять даты, парсить строки, показывать относительное время и учитывать локализацию. Также приведены подсказки по альтернативам и рекомендации для продакшена.

Установка Moment.js

Чтобы начать использовать Moment.js в React-приложении, установите пакет через npm или yarn:

npm install moment

Или:

yarn add moment

После установки вы можете импортировать moment в компонент и использовать его методы.

Отображение даты и времени

Импортируйте moment и используйте метод format() для преобразования момента времени в строку.

import React from 'react';
import moment from 'moment';

function App() {
  const date = moment().format("MMMM DD YYYY");
  const time = moment().format("HH mm ss");

  return (
    

      
 Today's date is { date } 
      
 The time is { time } 
    
  )
}

export default App

Объяснение: метод moment() создаёт объект момента — точку во времени. format() принимает строковый шаблон и возвращает отформатированную строку.

Важно: по умолчанию формат “MMMM” выводит название месяца на языке по умолчанию (обычно английском). Для вывода названий месяцев на русском установите локаль:

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

После установки локали формат с “MMMM” вернёт название месяца по-русски.

Форматные токены

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

• YYYY — год из четырёх цифр
• YY — год из двух цифр
• MM — месяц из двух цифр
• M — месяц без ведущего нуля
• MMMM — название месяца словами
• DD — день месяца из двух цифр
• D — день месяца без ведущего нуля
• Do — порядковый номер дня (1st, 2nd и т.д. в англ.)
• HH — час в 24-часовом формате с двумя цифрами
• H — час без ведущего нуля
• mm — минуты с двумя цифрами
• m — минуты без ведущего нуля
• ss — секунды с двумя цифрами
• s — секунды без ведущего нуля

Короткое определение: форматный токен — это символ или набор символов, которые moment интерпретирует как часть шаблона вывода даты.

Манипуляции с датой и временем

Moment.js позволяет добавлять, вычитать и устанавливать компоненты даты и времени.

import React from 'react';
import moment from 'moment';

function App() {
  const tomorrow = moment().add(1, 'day').format("Do MMMM, YYYY");
  const time = moment().subtract(1, 'hour').format("HH:mm:ss");
  const lastYear = moment().set('year', 2022).set('month', 1).format("Do MMMM, YYYY");
  const hour = moment().get('hour');

  return (
    

      
Tomorrow's date is { tomorrow }
      
This was the time: { time }, an hour ago
      
{ lastYear }
      
{ hour }
    
  )
}

export default App

Ключевые методы:

• add(value, unit) — добавляет указанную длительность (years, months, weeks, days, hours, minutes, seconds)
• subtract(value, unit) — вычитает длительность
• set(unit, value) — устанавливает конкретное значение (год, месяц, день и т.д.)
• get(unit) — получает значение компонента времени

Примечание о месяцах: в JavaScript месяцы часто считаются с нуля (0 = январь) при работе с нативным Date. В Moment.js месяцы отформатированы для чтения и set(‘month’, 1) установит февраль, если используется zero-based index в исходных данных — проверяйте входной формат.

Парсинг строк в дату

Moment.js умеет парсить строки по указанному шаблону и преобразовывать их в объекты момента или нативные Date.

import React from 'react';
import moment from 'moment';

function App() {
  const date = moment('2920130000', 'Do-MMMM-YYYY').toDate();
  console.log(date);

  return (
    

  )
}

export default App

Метод toDate() возвращает нативный объект JavaScript Date.

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

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

Для отображения относительных выражений типа “7 дней назад” или “через 7 дней” используются fromNow() и toNow().

import React from 'react';
import moment from 'moment';

function App() {
  const yesterday = moment().subtract(7, 'day');
  const time1 = yesterday.fromNow();
  const time2 = yesterday.toNow();

  return (
    

      
{ time1 }
      
{ time2 }
    
  )
}

export default App

fromNow() возвращает, сколько времени прошло с указанной даты. toNow() возвращает время до текущего момента. Для корректного отображения в нужной локали предварительно установите moment.locale(‘ru’).

Локализация и временные зоны

• Для локализации используйте импорты локалей и moment.locale(‘ru’).
• Для работы с временными зонами используйте moment-timezone (отдельный пакет):

npm install moment-timezone

И затем:

import moment from 'moment-timezone';
const m = moment.tz('2020-01-01 12:00', 'Europe/Moscow');

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

Альтернативы и состояние проекта

Примечание: проект Moment.js перешёл в режим maintenance; новые функции не планируются, но библиотека остаётся широко используемой и стабильной. При выборе библиотеки ориентируйтесь на требования проекта.

Распространённые альтернативы:

• date-fns — модульная библиотека с фокусом на малый размер и tree-shaking.
• Luxon — современная библиотека от авторов Moment.js с поддержкой Intl и удобным API для зон и локалей.
• Native Temporal (TC39) — новая спецификация для работы с датами/временем; сейчас доступна как полифил.

Когда выбирать альтернативу:

• Если критичен размер сборки — рассмотрите date-fns.
• Если важна поддержка Intl и удобная работа с часовыми поясами — смотрите в сторону Luxon.
• Если планируете перейти на стандартную спецификацию в будущем — следите за Temporal.

Когда Moment.js может подвести

• Размер пакета: при использовании полного Moment.js размер бандла может увеличиться.
• Производительность: в специфичных сценариях с миллионами операций следует профилировать.
• Устаревающие API: проект в режиме поддержки, поэтому новых фич ждать не стоит.

Памятка: чек-листы и критерии приёмки

Чек-лист разработчика:

• Установлен moment или moment-timezone, если нужны зоны
• Локаль установлена и проверена (moment.locale(‘ru’))
• Форматные шаблоны покрыты тестами на крайние случаи
• Парсинг осуществляется только по проверенным форматам
• Производительность измерена для критичных участков

Чек-лист для локализации:

• Проверены форматы дат в разных языках
• Дни недели и месяцы корректно отображаются для целевой локали
• Тексты с относительным временем проверены на естественность языка

Критерии приёмки:

• Все пользовательские сценарии с датами и временем проходят тесты
• Даты корректно отображаются в целевой локали
• Нет утечек временных зон при обмене данными между сервисами

Мини-методология миграции (при переходе с Moment.js)

1. Инвентаризация: найдите все места, где используется moment.
2. Выбор замены: date-fns для модульности, Luxon для зон и Intl.
3. Переход по шагам: заменяйте по одному компоненту/модулю и тестируйте.
4. Тесты: добавьте unit- и интеграционные тесты для граничных случаев.
5. Рефакторинг: удалите общий импорт moment после полной миграции.

Шпаргалка (cheat sheet)

• Создание текущей даты: moment()
• Формат: moment().format(‘YYYY-MM-DD’)
• Добавить 3 дня: moment().add(3, ‘days’)
• Вычесть 2 часа: moment().subtract(2, ‘hours’)
• Парсинг строки: moment(‘2020-12-31’, ‘YYYY-MM-DD’)
• В объект Date: moment(…).toDate()
• Относительное время: moment().fromNow()

Примеры тест-кейсов

• Парсинг: входная строка корректного формата возвращает ожидаемую дату
• Отрицательный тест: некорректный формат возвращает invalid или бросает контролируемую ошибку
• Локаль: при moment.locale(‘ru’) формат с MMMM возвращает русское название
• Временные зоны: при использовании moment-timezone результат соответствует ожидаемой временной зоне

Риски и смягчение

Риск: увеличение веса бандла — смягчение: использовать date-fns или динамический импорт. Риск: некорректная локализация — смягчение: интеграционные тесты локализации. Риск: ошибки при парсинге разнообразных форматов — смягчение: валидация входных данных и строгие шаблоны парсинга.

Заключение

Moment.js остаётся удобным и понятным инструментом для большинства задач с датами в React: форматирование, парсинг, манипуляции и относительное время. Однако для новых проектов стоит оценить требования по размеру бандла и возможностям локализации и временных зон; при строгих требованиях рассмотрите date-fns или Luxon.

Краткое резюме:

• Moment.js прост в использовании и совместим с React.
• Обязательно настройте локаль для корректного вывода названий месяцев и дней.
• Для больших приложений или оптимизации размера рассмотрите альтернативы.

Важно: протестируйте все сценарии с датами — локали, временные зоны и пограничные значения — прежде чем выпускать в продакшен.