Date-fns и работа с датами

Библиотека Date-fns предоставляет удобный, модульный и функциональный подход к работе с датами в JavaScript. Она позволяет выполнять большинство стандартных операций с датами без необходимости использования тяжеловесных объектов вроде Date или Moment.js, что особенно важно в проектах на SvelteKit, где минимизация размера бандла и скорость загрузки критичны.

Установка и подключение

Установка через npm:

npm install date-fns

Импорт конкретных функций выполняется по модульной схеме:

import { format, addDays, differenceInDays, parseISO } from 'date-fns';

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

Форматирование дат

Функция format позволяет преобразовать объекты Date в строки в заданном формате:

const today = new Date();
const formatted = format(today, "dd.MM.yyyy");
console.log(formatted); // 21.03.2026

Поддерживаются такие ключи форматирования, как:

  • yyyy — год, например 2026
  • MM — месяц с ведущим нулем
  • dd — день месяца с ведущим нулем
  • HH — часы в 24-часовом формате
  • mm — минуты
  • ss — секунды

Функция format также поддерживает локализацию:

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

const formattedRu = format(new Date(), "d MMMM yyyy", { locale: ru });
console.log(formattedRu); // 21 марта 2026

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

Для преобразования строк в объекты Date используется parse или parseISO:

import { parseISO } from 'date-fns';

const dateString = "2026-03-21";
const dateObj = parseISO(dateString);
console.log(dateObj); // Sat Mar 21 2026 00:00:00 GMT+0000

parseISO особенно удобен при работе с API, возвращающими даты в ISO-формате.

Арифметика с датами

Date-fns позволяет легко выполнять арифметические операции:

import { addDays, subMonths } from 'date-fns';

const today = new Date();
const nextWeek = addDays(today, 7);
const lastMonth = subMonths(today, 1);

console.log(nextWeek); // дата через 7 дней
console.log(lastMonth); // дата месяц назад

Для изменения отдельных частей даты также используются функции:

  • setYear(date, year)
  • setMonth(date, month)
  • setDate(date, day)

Пример:

import { setYear } from 'date-fns';

const newYearDate = setYear(new Date(), 2030);
console.log(newYearDate); // дата с изменённым годом 2030

Разница между датами

Функции differenceInDays, differenceInHours, differenceInMinutes позволяют вычислять интервалы между датами:

import { differenceInDays } from 'date-fns';

const start = new Date(2026, 2, 1);
const end = new Date(2026, 2, 21);
const diff = differenceInDays(end, start);

console.log(diff); // 20

Это удобно для создания таймеров, подсчёта сроков или вычисления возраста объектов.

Сравнение и проверка дат

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

  • isBefore(date1, date2) — дата1 раньше даты2
  • isAfter(date1, date2) — дата1 позже даты2
  • isEqual(date1, date2) — даты совпадают

Пример:

import { isBefore, isAfter } from 'date-fns';

const now = new Date();
const event = new Date(2026, 3, 1);

console.log(isBefore(now, event)); // true
console.log(isAfter(now, event)); // false

Локализация и многоязычность

Date-fns поддерживает множество локалей, что позволяет форматировать даты в нужном языке без сторонних библиотек. Импорт локали выполняется отдельно:

import { format } from 'date-fns';
import { enUS, fr } from 'date-fns/locale';

const date = new Date();
console.log(format(date, "PPP", { locale: fr })); // 21 mars 2026
console.log(format(date, "PPP", { locale: enUS })); // Mar 21, 2026

Интеграция с SvelteKit

В SvelteKit компоненты работают с датами аналогично обычному JavaScript, но важно учитывать реактивность:

<script>
  import { format, addDays } from 'date-fns';

  let today = new Date();
  $: nextWeek = format(addDays(today, 7), "dd.MM.yyyy");
</script>

<p>Сегодня: {format(today, "dd.MM.yyyy")}</p>
<p>Через неделю: {nextWeek}</p>

Использование реактивных переменных $: позволяет автоматически обновлять отображение даты при изменении исходного объекта.

Советы по производительности

  • Подключать только те функции Date-fns, которые реально используются, чтобы уменьшить размер бандла.
  • Использовать format и арифметические функции напрямую в реактивных выражениях SvelteKit для динамических интерфейсов.
  • Для локализации загружать только необходимые языки.
  • При работе с большими массивами дат использовать чисто функциональные методы (map, filter) вместо циклов с мутацией, что облегчает отладку и повышает предсказуемость.

Вспомогательные функции

Date-fns также предлагает функции для удобной работы с календарными структурами:

  • startOfDay(date), endOfDay(date) — начало и конец дня
  • startOfWeek(date), endOfWeek(date) — границы недели
  • startOfMonth(date), endOfMonth(date) — границы месяца

Пример:

import { startOfMonth, endOfMonth } from 'date-fns';

const now = new Date();
const firstDay = startOfMonth(now);
const lastDay = endOfMonth(now);

console.log(firstDay, lastDay);

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

Date-fns сочетает в себе простоту, модульность и высокую производительность, делая работу с датами в SvelteKit легкой, предсказуемой и эффективной.

Оглавление