# gt-next: General Translation Next.js SDK: DateTime
URL: https://generaltranslation.com/ru/docs/next/api/components/datetime.mdx
---
title: DateTime
description: Справочная документация по API компонента DateTime
---

{/* СОЗДАНО АВТОМАТИЧЕСКИ: Не редактируйте напрямую. Вместо этого измените шаблон в content/docs-templates/. */}


## Обзор

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

```jsx
<DateTime>{1738010355}</DateTime>
// Вывод: 1/27/2025
```

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

<Callout type="warn">
  `<DateTime>` может вызывать **ошибки гидратации в React** в приложениях с рендерингом на сервере. См. раздел [Как избежать ошибок гидратации](#avoiding-hydration-errors) ниже.
</Callout>


## Справка

### Свойства

<TypeTable
  type={{
  "children?": {
      description: 'Содержимое с датой для форматирования.',
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      type: 'string | number | Date',
      optional: true,
      default: 'undefined',
  },
  "options?": {
      type: 'Intl.DateTimeFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Описание

| Название свойства | Описание                                                                                                                                                                                                                                                                                                                                |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`        | Содержимое, которое будет отображаться внутри компонента. Обычно это значение даты или времени. Если оно указано, оно имеет приоритет над свойством `value`.                                                                                                                                                                            |
| `value`           | Значение даты или времени по умолчанию. Может быть строкой, числом (меткой времени) или объектом Date.                                                                                                                                                                                                                                  |
| `options`         | Необязательные параметры форматирования даты или времени в соответствии со [спецификацией `Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). Используйте их, чтобы задавать такие параметры, как названия дней недели, часовые пояса и многое другое. |
| `locales`         | Необязательный параметр locales для указания локали форматирования. Если он не задан, используется локаль пользователя. Подробнее о том, как указывать локали, читайте [здесь](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).                                                 |

### Возвращает

`JSX.Element`, содержащий дату или время, отформатированные как строка.

***

## Примеры

### Базовое использование

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

```jsx title="EventDate.jsx" copy
import { DateTime } from 'gt-next';

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


### Указание локалей

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

```jsx title="EventDate.jsx" copy

import { DateTime } from 'gt-next';

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


### Перевод DateTime

Если вы хотите, чтобы дата и время отображались в предложении, которое тоже переводится, можно обернуть компонент `<DateTime>` в компонент `<T>`.

```jsx title="EventDate.jsx" copy
import { T, DateTime } from 'gt-next';

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


### Настраиваемое форматирование

Компонент `<DateTime>` поддерживает настраиваемые параметры форматирования.

```jsx title="EventDate.jsx" copy
import { DateTime } from 'gt-next';

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

***


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

Поскольку `<DateTime>` форматирует даты локально с помощью `Intl.DateTimeFormat`, он может выдавать **разный результат на сервере и клиенте**. Когда React сравнивает HTML, отрендеренный на сервере, с результатом рендеринга на клиенте и обнаруживает несовпадение, возникает ошибка гидратации.

Обычно это происходит в следующих случаях:

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

### Как это исправить

**Явно укажите `timeZone` в `options`**, чтобы вывод был единообразным:

```jsx
<DateTime options={{ timeZone: 'America/New_York' }}>
  {event.date}
</DateTime>
```

**Явно укажите `locales`**, чтобы избежать несоответствия локалей:

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

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


## Примечания

* Компонент `<DateTime>` — это компонент для переменных, который можно использовать для форматирования даты и времени.
* Для форматирования компонент использует библиотеку [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).

## Следующие шаги

* Подробные сведения и примеры использования компонента `<DateTime>` и других компонентов для переменных, таких как `<Currency>`, `<Num>` и `<Var>`, см. в документации [Использование компонентов для переменных](/docs/next/guides/variables).