Какие знаешь решения по работе с датами?

Решения для работы с датами в Frontend-разработке

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

Нативные API JavaScript

Стандартный объект Date — основа, но имеет серьезные ограничения:

• Плохая поддержка парсинга строк (особенно кросс-браузерные различия)
• Сложности с операциями сложения/вычитания
• Отсутствие встроенной поддержки временных зон

// Пример проблем с Date
const date1 = new Date('2023-13-45'); // Invalid Date в некоторых браузерах
const date2 = new Date(2023, 12, 32); // Автоматическая нормализация (превратится в 2024-02-01)

Современное нативное решение: Temporal API

Новый Temporal API (в стадии提案 TC39) решает многие проблемы:

// Будет доступно в будущем
const date = Temporal.PlainDate.from({ year: 2023, month: 12, day: 25 });
const result = date.add({ months: 1 }); // Безопасная операция

Популярные библиотеки

date-fns — модульный подход

Моя основная рекомендация для большинства проектов:

import { format, addDays, parseISO } from 'date-fns';
import { ru } from 'date-fns/locale';

// Форматирование с локализацией
format(new Date(), 'dd MMMM yyyy', { locale: ru }); // "25 декабря 2023"

// Безопасные операции
addDays(new Date(), 7); // Всегда корректный результат

Преимущества date-fns:

• Деревошикание (tree-shaking) — импортируются только используемые функции
• Неизменяемость всех операций
• Отличная поддержка TypeScript
• Более 200 функций для любых операций

Day.js — легкая альтернатива Moment.js

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

dayjs.locale('ru');
dayjs().format('DD MMMM YYYY'); // "25 декабря 2023"
dayjs().add(1, 'month').format();

Когда выбирать Day.js:

• Небольшие проекты с ограниченными требованиями
• Когда критичен размер бандла (Day.js ~2KB против Moment.js ~200KB)
• Для миграции с Moment.js (совместимый API)

Luxon — мощное решение от создателей Moment.js

import { DateTime } from 'luxon';

DateTime.now()
  .setZone('Europe/Moscow')
  .plus({ days: 1 })
  .toLocaleString(DateTime.DATE_FULL);

Сильные стороны Luxon:

• Превосходная работа с временными зонами
• Встроенная поддержка интервалов и длительностей
• Более логичный API по сравнению с Moment.js

Специализированные решения

Для календарей и планировщиков

• FullCalendar — полнофункциональный календарь
• React Big Calendar — для React-приложений

Для сложных операций с временем

• Moment.js (устаревший, но все еще используется)
• js-joda — порт Joda-Time для JavaScript

Best Practices из моего опыта

1. Единая точка управления датами

   // utils/dateFormatter.js
   import { format, parseISO } from 'date-fns';
   import { ru } from 'date-fns/locale';
   
   export const formatDate = (date, pattern = 'dd.MM.yyyy') => 
     format(typeof date === 'string' ? parseISO(date) : date, pattern, { locale: ru });
   

2. Работа с временными зонами

   // Всегда хранить даты в UTC в бэкенде
   // Конвертировать в локальную зону только для отображения
   const serverDate = '2023-12-25T10:00:00Z'; // UTC
   const localDate = new Date(serverDate); // Автоматическая конвертация
   

3. Валидация ввода пользователя

   import { isValid, parse } from 'date-fns';
   
   const validateDate = (input) => {
     const date = parse(input, 'dd.MM.yyyy', new Date());
     return isValid(date);
   };
   

4. Производительность при рендеринге списков

   // Кеширование отформатированных дат
   const dateCache = new Map();
   
   const getFormattedDate = (timestamp) => {
     if (!dateCache.has(timestamp)) {
       dateCache.set(timestamp, formatDate(timestamp));
     }
     return dateCache.get(timestamp);
   };
   

Критерии выбора решения

1. Размер проекта: Day.js для малых, date-fns для средних, Luxon для сложных
2. Требования к локализации: Проверять поддержку нужных языков
3. Работа с временными зонами: Luxon или date-fns-tz
4. Экосистема: Совместимость с React, Vue, Angular
5. Поддержка: Активность репозитория, частота обновлений

Вывод

Для новых проектов я рекомендую date-fns как наиболее сбалансированное решение. Он сочетает модульность, хорошую производительность и отличный Developer Experience. При миграции с Moment.js стоит рассмотреть Day.js или Luxon. Важно стандартизировать работу с датами на уровне всей codebase и документировать принятые решения, чтобы избежать противоречий в разных частях приложения.