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

Отображение локализованных дат вместо непонятных чисел

Проблема

Отображение даты в сыром виде, например 10/12/2025, может быть неоднозначным. Пользователь из США воспримет это как 12 октября, а пользователь из Великобритании — как 10 декабря. Жёстко заданный формат (например, '12 окт. 2025') создаёт неестественный или трудночитаемый опыт для пользователей из разных регионов.

Решение

Используйте специальный компонент форматирования из библиотеки, например react-intl. Такой компонент, как FormattedDate, автоматически определяет текущий язык из своего провайдера. Он преобразует объект Date в корректную, удобочитаемую строку в соответствии с языковыми правилами пользователя, учитывая порядок, разделители и названия месяцев.

Шаги

1. Создайте клиентский компонент для даты

Поскольку компоненты react-intl требуют IntlProvider, их нужно использовать внутри клиентских компонентов.

Создайте новый компонент app/components/PostDetails.tsx, который будет отображать отформатированную дату.

// app/components/PostDetails.tsx
'use client';

import { FormattedDate } from 'react-intl';

type Props = {
  publishDate: Date;
};

export default function PostDetails({ publishDate }: Props) {
  return (
    <div>
      Posted on:
      <FormattedDate
        value={publishDate}
        dateStyle="long"
        timeStyle="short"
      />
    </div>
  );
}

Этот компонент принимает объект Date как пропс. Затем он использует FormattedDate для его отображения.

2. Передайте параметры форматирования

Компонент FormattedDate принимает опции для управления выводом. В приведённом выше примере:

  • value — это объект Date для форматирования.
  • dateStyle="long" запрашивает формат вроде «10 декабря 2025». Есть и другие варианты: «полный», «средний» и «краткий».
  • timeStyle="short" запрашивает формат вроде «15:00».

3. Используйте компонент на странице

Теперь вы можете использовать свой новый компонент на любой странице, например, на главной.

// app/[lang]/page.tsx
import PostDetails from '@/app/components/PostDetails';

export default function Home() {
  // This could come from a database or API
  const myPostDate = new Date('2025-12-10T15:00:00Z');

  return (
    <div>
      <h1>My blog post</h1>
      <PostDetails publishDate={myPostDate} />
      <p>This is the content of the post...</p>
    </div>
  );
}

Пользователь, который зайдёт на /en, увидит «Опубликовано: 10 декабря 2025 в 15:00». Пользователь, который зайдёт на /es, увидит «Опубликовано: 10 de diciembre de 2025, 15:00».