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

React Aria предоставляет мощный и гибкий подход к работе с локализацией и форматированием дат в приложениях на JavaScript. Основной модуль для работы с датами — @react-aria/i18n. Он позволяет корректно отображать даты, поддерживая разные локали, форматы и календарные системы, что особенно важно для международных приложений.

Использование useDateFormatter

Основной хук для форматирования дат — useDateFormatter. Он возвращает функцию, которая принимает объект Date и возвращает локализованную строку.

import { useDateFormatter } from '@react-aria/i18n';

function FormattedDate({ date }) {
  let formatter = useDateFormatter({
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });

  return <span>{formatter.format(date)}</span>;
}
  • weekday — отображение дня недели (long, short, narrow).
  • year — формат года (numeric, 2-digit).
  • month — формат месяца (numeric, 2-digit, long, short, narrow).
  • day — формат дня месяца (numeric, 2-digit).

useDateFormatter основан на стандартном API Intl.DateTimeFormat, что гарантирует корректное форматирование для любой локали.

Поддержка локалей

Локаль можно задать глобально через LocaleProvider или непосредственно в параметрах useDateFormatter:

import { useDateFormatter, LocaleProvider } from '@react-aria/i18n';

<LocaleProvider locale="fr-FR">
  <FormattedDate date={new Date()} />
</LocaleProvider>

В этом примере дата будет отображаться в французском формате. Также можно указать локаль для отдельного форматтера:

let formatter = useDateFormatter({
  locale: 'ja-JP',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

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

React Aria поддерживает форматирование времени через те же опции, что и стандартный Intl.DateTimeFormat.

let timeFormatter = useDateFormatter({
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  hour12: false
});

console.log(timeFormatter.format(new Date())); // "14:35:22"
  • hour, minute, second — определяют отображение компонентов времени.
  • hour12 — режим 12/24 часов.

Комбинированное форматирование даты и времени

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

let dateTimeFormatter = useDateFormatter({
  weekday: 'short',
  year: 'numeric',
  month: 'short',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit'
});

console.log(dateTimeFormatter.format(new Date())); // "Mon, Mar 16, 2026, 14:35"

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

React Aria позволяет отображать диапазоны дат с помощью formatDateRange. Для этого используется DateFormatter с двумя аргументами: start и end.

import { useDateFormatter } from '@react-aria/i18n';

function DateRange({ start, end }) {
  let formatter = useDateFormatter({
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });

  return (
    <span>
      {formatter.formatRange(start, end)}
    </span>
  );
}

<DateRange start={new Date(2026, 2, 1)} end={new Date(2026, 2, 10)} />

Вывод: "March 1 – March 10, 2026".

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

useDateFormatter поддерживает опцию timeZone, позволяя отображать дату и время в конкретной временной зоне:

let formatter = useDateFormatter({
  timeZone: 'America/New_York',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit'
});

console.log(formatter.format(new Date()));

Это особенно полезно для приложений с пользователями в разных странах.

Поддержка нестандартных календарей

React Aria совместим с различными календарными системами, такими как японский, исламский или буддистский календарь. Для этого используется ключ calendar:

let formatter = useDateFormatter({
  calendar: 'japanese',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

console.log(formatter.format(new Date()));

Дата будет отображена согласно японской системе лет.

Форматирование чисел и месяцев отдельно

Для отображения только числовых частей даты, например, месяца или года, можно использовать отдельные вызовы useDateFormatter:

let monthFormatter = useDateFormatter({ month: 'long' });
let yearFormatter = useDateFormatter({ year: 'numeric' });

console.log(monthFormatter.format(new Date())); // "March"
console.log(yearFormatter.format(new Date()));  // "2026"

Резюме по ключевым возможностям

  • Локализованное форматирование даты и времени.
  • Поддержка диапазонов дат.
  • Настройка формата компонентов даты (weekday, month, year, day).
  • Управление форматом времени (hour, minute, second, hour12).
  • Работа с временными зонами.
  • Поддержка нестандартных календарей.
  • Отдельное форматирование компонентов даты для кастомных UI.

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

Оглавление