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

Дата и время — ключевая часть любого приложения. В React это не исключение. Встроенные средства JavaScript для работы с датами иногда неудобны или громоздки. Day.js упрощает большинство рутинных задач: парсинг, валидацию, манипуляции и форматирование дат.

Коротко о Day.js: это лёгкая библиотека для парсинга, валидации, манипуляций и форматирования дат и времени в JavaScript. Она предлагает API, совместимый по духу с Moment.js, но с меньшим весом и более современной архитектурой плагинов.

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

Day.js — современная альтернатива Moment.js. Если вы используете npm, установите библиотеку командой:

npm install dayjs  

Советы по подключению:

• Используйте пакетный менеджер проекта (npm или yarn).
• Подключайте плагины только по необходимости, чтобы не наращивать размер бандла.

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

Day.js предоставляет простой API. Метод dayjs() создаёт объект Day.js. Сначала импортируйте библиотеку:

import React from 'react';  
import dayjs from 'dayjs';  
  
function App() {  
  
  const date = dayjs();  
  console.log(date);   
  
  return (  
    
  
      
Date and Time Management
  
    
  
  )  
}  
  
export default App  

Метод dayjs() создаёт объект, представляющий указанную дату и время. Если аргумент отсутствует, он возвращает текущую дату и время.

Вы можете передать строку, число (Unix timestamp в миллисекундах), объект Date или другой объект Day.js:

import React from 'react';  
import dayjs from 'dayjs';  
  
function App() {  
  
  const date = dayjs('2023-05-01');  
  console.log(date); // Day.js object representing the date specified  
  
  const unixDate = dayjs(1651382400000);  
  console.log(unixDate); // Day.js object representing the date specified  
  
  return (  
    
  
      
Date and Time Management
  
    
  
  )  
}  
  
export default App  

Чтобы показать дату как строку, используйте метод format(). Он принимает строку формата с символами, которые дают смысл каждой части даты:

import React from 'react';  
import dayjs from 'dayjs';  
  
function App() {  
  
  const date = dayjs('2023-05-01').format('dddd, MMMM D, YYYY'); // Monday, May 1, 2023  
  const time = dayjs().format('HH:mm:ss'); //09:50:23  
  const unixDate = dayjs(1651382400000).format('MM/DD/YY'); // 05/01/22  
  
  return (  
    
  
      
{date}
  
      
{unixDate}
  
     
{time}
  
    
  
  )  
}  
  
export default App  

Ключевые маркеры формата:

• dddd — полное название дня недели.
• MMMM — название месяца словами.
• D — день месяца (1–31).
• DD — день месяца с ведущим нулём (01–31).
• YYYY — год из четырёх цифр.
• MM — месяц с ведущим нулём (01–12).
• HH:mm:ss — часы, минуты, секунды в 24-часовом формате.

Манипулирование датами и временем

Day.js содержит методы add() и subtract() для простых арифметических операций со временем.

import React from 'react';  
import dayjs from 'dayjs';  
  
function App() {  
  
  const date = dayjs().add(7,'days').format('dddd, MMMM D, YYYY'); // Wednesday, June 16, 2023   
  const time = dayjs().subtract(2, 'hours').format('HH:mm:ss'); // 07:53:00  
  
  return (  
    
  
      
{date}
  
      
{time}
  
    
  
  )  
}  
  
export default App  

Методы принимают число и единицу времени: ‘year’, ‘month’, ‘day’, ‘hour’, ‘minute’, ‘second’ и их краткие формы (‘y’, ‘M’, ‘d’, ‘h’, ‘m’, ‘s’). Всегда приводите единицы к строке и используйте локаль проекта для единообразия.

Важно: Day.js возвращает новые объекты — оригинальные объекты остаются неизменными. Это делает код предсказуемым и удобным для React-компонентов.

Отображение относительного времени

Чтобы показать строки типа «2 часа назад» или «через 3 дня», подключите плагин relativeTime:

import React from 'react';  
import dayjs from 'dayjs';  
import relativeTime from 'dayjs/plugin/relativeTime';  
  
function App() {  
  
  dayjs.extend(relativeTime);  
    
  const date = dayjs().add(7, 'days')  
  const relativeDate = date.fromNow(); // in 7 days  
  
  const date2 = dayjs().subtract(2, 'hours');  
  const relativeDate2 = date2.toNow(); // in 2 hours  
  
  const lastYear = dayjs().subtract(1, 'year');  
  const diff = date.from(lastYear); // in a year  
  const diff2 = date.to(lastYear) // a year ago  
  
  return (  
    
  
      
{ relativeDate }
  
      
{ relativeDate2 }
  
      
{ diff }
  
      
{ diff2 }
  
    
  
  )  
}  
  
export default App  

Параметр suffix (boolean) управляет наличием окончания, например “ago” или “in”:

const date = dayjs().add(7, 'days')  
const relativeDate = date.fromNow(true); // 7 days  

const date2 = dayjs().subtract(2, 'hours');  
const relativeDate2 = date2.toNow(true); // 2 hours  

const lastYear = dayjs().subtract(1, 'year');  
const diff = date.from(lastYear, true) // a year  
const diff2 = date.to(lastYear, true) // a year  

Плагины и локализация

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

• relativeTime — относительное время.
• localizedFormat — локализованные форматные строки.
• utc и timezone — работа с UTC и часовыми поясами (требуют дополнительных миграций).
• advancedFormat — дополнительные маркеры форматирования.

Пример подключения локали:

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

Совет: подключайте локаль один раз в корне приложения (например, в index.js) и используйте её глобально.

Когда Day.js может не подойти

• Если вам нужен богатый набор функций работы с часовыми поясами и IANA-базой зон, лучше смотреть в сторону Luxon или date-fns-tz.
• Если проект уже использует Moment.js и миграция затруднительна, оцените стоимость переезда.
• Если требуется функционал длительных периодов и сложных интервалов с вычислениями календаря (рабочие дни, холидеи), возможно нужны специализированные библиотеки.

Альтернативы и сравнение

• Moment.js — зрелая, но тяжёлая библиотека. Лёгкость миграции: высокая API-совместимость, но хуже по весу.
• Luxon — современная библиотека от тех же авторов Moment.js, имеет встроенную поддержку часовых поясов и интернационализации.
• date-fns — модульная библиотека с функциями вместо объектов; с ней удобнее tree-shaking.

Короткая матрица совместимости:

• Простые форматирования — Day.js, date-fns, Moment.js.
• Часовые пояса — Luxon, date-fns-tz.
• Минимальный вес — Day.js, date-fns (модули).
• Полная совместимость с Moment API — Day.js (плагин миграции).

Ментальные модели и эвристики

1. Под «весом» понимаем размер бандла, а не только «количество функций». Подключайте только нужные плагины.
2. Разделяйте парсинг/форматирование и бизнес-логику. Для React используйте форматирование только на этапе рендера.
3. Храните даты в UTC в слое данных, а отображайте в локальной зоне пользователя.
4. Всегда тестируйте переходы на зимнее/летнее время и граничные моменты (последняя секунда дня, переход года).

Чеклист по ролям

Разработчик фронтенда:

• Установил dayjs и только нужные плагины.
• Настроил локализацию в корне приложения.
• Не форматирует даты в рендерах без кеширования при частых рендерах.

Бэкенд-разработчик:

• Передаёт даты в ISO 8601 или в timestamp в миллисекундах.
• Документирует зону хранения дат (UTC или локальная).

Тестировщик:

• Проверил отображение дат в нескольких локалях и при смене часовых поясов.
• Проверил относительные строки (fromNow, toNow) и их суффиксы.

Продуктовый менеджер:

• Уточнил требования по локали и часовым поясам пользователей.
• Уточнил, нужна ли история изменений дат и временных меток.

Шаблоны и сниппеты — cheat sheet

Быстрый парсинг ISO и форматирование в локале:

import dayjs from 'dayjs';
import 'dayjs/locale/ru';
import localizedFormat from 'dayjs/plugin/localizedFormat';

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

const s = dayjs('2024-01-09T12:34:56Z').format('LLLL');

Добавление дня и форматирование:

const nextWeek = dayjs().add(7, 'day').format('YYYY-MM-DD');

Преобразование timestamp в человекочитаемую дату:

const readable = dayjs(1651382400000).format('YYYY-MM-DD HH:mm:ss');

Относительное время без суффикса:

import relativeTime from 'dayjs/plugin/relativeTime';

dayjs.extend(relativeTime);
const r = dayjs().add(3, 'day').fromNow(true); // '3 days'

Миграция с Moment.js

Если проект использует Moment.js, миграция на Day.js часто тривиальна благодаря совместимому API. Рекомендации:

• Подключите плагин dayjs/plugin/customParseFormat, если вы парсите нестандартные форматы.
• Протестируйте страницы с интенсивной датированной логикой.
• Запустите bundle analyzer и сравните размер бандла до и после.

Decision flowchart

Если вы не уверены, какую библиотеку выбирать, простая схема поможет:

flowchart TD
  A[Нужно только форматирование и добавление/вычитание] --> B[Day.js]
  A --> C{Требуется поддержка часовых поясов}
  C -->|Да| D[Luxon или date-fns-tz]
  C -->|Нет| B
  B --> E{Нужна миграция с Moment?}
  E -->|Да| B
  E -->|Нет| B

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

• Даты отображаются корректно в заявленных локалях.
• Относительное время соответствует ожидаемому (с или без суффикса).
• Производительность при рендере не ухудшилась (нет лишних вычислений).
• Размер итогового бандла в пределах заданных ограничений.

Примеры, где Day.js не подойдёт

• Проекты с интенсивным использованием часовых поясов и необходимостью точной работы с IANA-зоной.
• Сценарии с требованием вычислять рабочие дни с учётом праздников и региональных календарей.

Безопасность и приватность

Day.js — клиентская библиотека. Она не отправляет данные на внешние сервисы. Если вы форматируете пользовательские даты, убедитесь, что данные проходят валидацию на сервере и что логирование не раскрывает чувствительные временные метки.

Итоги

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

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

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

Заметки:

• Проверяйте крайние случаи: переход на новую секунду, перевод часов, последний день месяца.
• Храните даты в UTC на сервере и преобразуйте в локальные только при отображении.

Краткое резюме по действиям:

• Установите dayjs через npm.
• Подключите плагины по потребности.
• Централизуйте локализацию.
• Тестируйте крайние временные случаи и переходы часовых поясов.