# General Translation React SDKs (gt-react, gt-next): DateTime
URL: https://generaltranslation.com/ru/docs/react/reference/components/datetime.mdx
---

title: DateTime
description: Форматирование даты и времени для активной локали с помощью General Translation gt-react. Справочник по API для DateTime.

---

Компонент `<DateTime>` отображает дату или время в формате активной локали. Он поддерживает пользовательские параметры форматирования и переопределение локали.

*Доступно в `gt-react`, `gt-next`, `gt-tanstack-start` и `gt-react-native`. В примерах импорт выполняется из `gt-react`; вместо этого импортируйте из пакета вашего фреймворка.*

## Обзор [#overview]

Передайте `Date` как `children`, и `<DateTime>` отформатирует его в соответствии с активной локалью.

```tsx
<DateTime>{new Date(1738010355000)}</DateTime>
// Вывод: 1/27/2025
```

Все форматирование обрабатывается локально с помощью [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).

*Примечание: `<DateTime>` может вызывать ошибки гидратации React в приложениях с серверным рендерингом. См. [Как избежать ошибок гидратации](#hydration).*

## Как это работает [#how-it-works]

* **Локальное форматирование.** Дата форматируется в браузере с помощью `Intl.DateTimeFormat`. Ее значение никогда не отправляется в API General Translation.
* **Определение локали.** Форматирование определяется активной локалью, если не указано иное через `locales`.
* **Часовой пояс имеет значение.** Без явно заданного `timeZone` результат зависит от часового пояса среды выполнения, который может различаться на сервере и на клиенте.

## Пропсы [#props]

| Prop                    | Описание                                  | Type                         | Необязательный | По умолчанию    |
| ----------------------- | ----------------------------------------- | ---------------------------- | -------------- | --------------- |
| [`children`](#children) | Дата для форматирования.                  | `Date`                       | Нет            | —               |
| [`options`](#options)   | Параметры `Intl.DateTimeFormat`.          | `Intl.DateTimeFormatOptions` | Да             | `{}`            |
| [`locales`](#locales)   | Переопределяет локаль для форматирования. | `string[]`                   | Да             | Активная локаль |
| [`name`](#name)         | Имя переменной для записи.                | `string`                     | Да             | —               |

### `children` [#children]

**Тип** `Date` · **Обязательно**

Дата или время, которое нужно отформатировать, в виде объекта `Date`.

### `options` [#options]

**Тип** `Intl.DateTimeFormatOptions` · **Необязательный** · **По умолчанию** `{}`

Параметры форматирования в соответствии со спецификацией [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat), например `dateStyle`, `timeStyle` и `timeZone`.

### `locales` [#locales]

**Тип** `string[]` · **Необязательно** · **По умолчанию** Активная локаль

Локали, для которых выполняется форматирование. Если параметр не указан, используется активная локаль. См. [аргумент locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).

### `name` [#name]

**Тип** `string` · **Необязательно**

Необязательное имя поля даты, используемое для метаданных.

## Примеры [#examples]

```tsx title="EventDate.tsx"
import { DateTime } from 'gt-react';

export default function EventDate({ event }) {
  return <DateTime>{event.date}</DateTime>; // [!code highlight]
}
```

```tsx title="EventDate.tsx"
import { DateTime } from 'gt-react';

export default function EventDate({ event }) {
  return <DateTime locales={['fr-FR']}>{event.date}</DateTime>; // [!code highlight]
}
```

```tsx title="EventDate.tsx"
import { T, DateTime } from 'gt-react';

export default function EventDate({ event }) {
  return (
    <T>
      The time of the event is <DateTime>{event.date}</DateTime>. // [!code highlight]
    </T>
  );
}
```

```tsx title="EventDate.tsx"
import { DateTime } from 'gt-react';

export default function EventDate({ event }) {
  return (
    <DateTime
      options={{
        dateStyle: 'full', // [!code highlight]
        timeStyle: 'long', // [!code highlight]
        timeZone: 'Australia/Sydney', // [!code highlight]
      }}
    >
      {event.date}
    </DateTime>
  );
}
```

## Как избежать ошибок гидратации [#hydration]

Поскольку `<DateTime>` форматирует даты с учётом локальных настроек, на сервере и на клиенте он может выдавать разный результат. Если React сравнивает HTML, сгенерированный на сервере, с результатом рендера на клиенте и они не совпадают, возникает ошибка гидратации. Обычно это происходит, когда:

* **Явно не задан `timeZone`.** Сервер может работать в UTC, тогда как браузер использует местное время, поэтому временная метка может рендериться как `"1/27/2025"` на сервере и как `"1/28/2025"` на клиенте.
* **Локаль по умолчанию различается в разных окружениях.** Несовпадение локали по умолчанию приводит к разным строкам (например, `"27/01/2025"` и `"1/27/2025"`).

Явно зафиксируйте и локаль, и часовой пояс, чтобы сервер и клиент всегда выдавали одну и ту же строку:

```tsx
<DateTime locales={['en-US']} options={{ timeZone: 'UTC' }}>
  {event.date}
</DateTime>
```