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

Fresh — современный веб-фреймворк на базе Deno, который обеспечивает высокую производительность и минимальную сложность при создании веб-приложений. Работа с датами в Fresh строится на стандартных возможностях JavaScript и Deno, но с учетом серверного рендеринга и особенностей маршрутизации. Основная задача форматирования дат заключается в преобразовании объектов Date в строки, удобные для отображения на страницах.

Объект Date и его создание

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

const now = new Date();

Можно создать дату из строки или таймстампа:

const specificDate = new Date("2025-12-23T15:30:00Z");
const timestampDate = new Date(1760000000000);

Объект Date предоставляет методы для получения отдельных компонентов даты и времени:

const year = now.getFullYear();
const month = now.getMonth() + 1; // месяца нумеруются с 0
const day = now.getDate();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();

Форматирование через Intl.DateTimeFormat

Для локализованного форматирования используется API Intl.DateTimeFormat:

const formatter = new Intl.DateTimeFormat("ru-RU", {
  year: "numeric",
  month: "long",
  day: "2-digit",
  weekday: "long",
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit",
  hour12: false,
});

const formattedDate = formatter.format(now);

Параметры форматирования:

  • year: "numeric" или "2-digit".
  • month: "numeric", "2-digit", "long", "short", "narrow".
  • day: "numeric" или "2-digit".
  • weekday: "long", "short", "narrow".
  • hour, minute, second: "numeric" или "2-digit".
  • hour12: true или false для 12-часового формата.

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

Прямое форматирование с помощью шаблонных строк

Для кастомного формата можно собрать строку вручную:

function formatDate(date) {
  const day = String(date.getDate()).padStart(2, "0");
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const year = date.getFullYear();
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");

  return `${day}.${month}.${year} ${hours}:${minutes}:${seconds}`;
}

const customFormatted = formatDate(now);

padStart используется для обеспечения двузначного отображения чисел.

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

Для более сложных задач, таких как форматирование с учетом временных зон, интервалов и календарных вычислений, в Fresh можно использовать библиотеки, совместимые с Deno, например date-fns или luxon.

Пример с date-fns:

import { format } from "https://cdn.skypack.dev/date-fns@2.30.0";
import { ru } from "https://cdn.skypack.dev/date-fns/locale/ru/index.js";

const formatted = format(now, "dd MMMM yyyy, HH:mm:ss", { locale: ru });

date-fns позволяет легко работать с форматами, добавлять локализацию и выполнять арифметику с датами.

Форматирование дат на сервере и клиенте

Fresh рендерит страницы на сервере (SSR), поэтому форматирование дат можно выполнять в обработчиках маршрутов:

export function handler(req, ctx) {
  const now = new Date();
  return ctx.render({ currentTime: formatDate(now) });
}

На клиенте можно использовать те же функции или библиотечный подход:

const currentTime = formatDate(new Date());
document.getElementById("time").textContent = currentTime;

Совместное использование серверного и клиентского форматирования позволяет синхронизировать отображение времени и управлять локалью.

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

Intl.DateTimeFormat позволяет указать временную зону:

const formatterMoscow = new Intl.DateTimeFormat("ru-RU", {
  timeZone: "Europe/Moscow",
  year: "numeric",
  month: "long",
  day: "2-digit",
  hour: "2-digit",
  minute: "2-digit",
});
const moscowTime = formatterMoscow.format(now);

Библиотеки вроде luxon дают более гибкий контроль:

import { DateTime } from "https://cdn.skypack.dev/luxon@3.5.0";

const dt = DateTime.now().setZone("Europe/Moscow");
const formattedLuxon = dt.toFormat("dd LLL yyyy HH:mm");

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

Метод Легкость Локализация Гибкость Зависимости
Date + шаблонные строки высокая низкая средняя нет
Intl.DateTimeFormat средняя высокая средняя нет
date-fns средняя высокая высокая есть
luxon средняя высокая очень высокая есть

Выбор метода зависит от требований к локализации, временным зонам и сложности форматирования.

Итоговые рекомендации

  • Для базового форматирования и локализованного отображения использовать Intl.DateTimeFormat.
  • Для кастомных форматов или поддержки сложных календарных вычислений применять date-fns или luxon.
  • В серверной части Fresh выполнять форматирование в обработчиках маршрутов для единообразного SSR.
  • Всегда учитывать временные зоны при работе с международными пользователями.
Оглавление