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

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

Проблема

Отображение необработанной даты, например, 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>
      Опубликовано:
      <FormattedDate
        value={publishDate}
        dateStyle="long"
        timeStyle="short"
      />
    </div>
  );
}

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

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

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

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

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

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

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

export default function Home() {
  // Это может быть получено из базы данных или API
  const myPostDate = new Date('2025-12-10T15:00:00Z');

  return (
    <div>
      <h1>Мой блог</h1>
      <PostDetails publishDate={myPostDate} />
      <p>Это содержание поста...</p>
    </div>
  );
}

Пользователь, посещающий /en, увидит "Опубликовано: 10 декабря 2025 г. в 15:00". Пользователь, посещающий /es, увидит "Publicado el 10 de diciembre de 2025, 15:00".