# react-native: DateTime
URL: https://generaltranslation.com/ru/docs/react-native/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`      | Значение даты или времени по умолчанию. Может быть строкой, числом (timestamp) или объектом Date.                                                                                                                                                                                                                                |
| `options`    | Необязательные параметры форматирования даты или времени в соответствии со [спецификацией `Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). Используйте их, чтобы задавать такие параметры, как названия дней недели, часовые пояса и другие. |
| `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-react-native';

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


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

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

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

import { DateTime } from 'gt-react-native';

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-react-native';

export default function EventDate(event) {
    return (
        <T id="eventDate">
            Время события: <DateTime> {event.date} </DateTime>. // [!code highlight]
        </T>
    );
}
```


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

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

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

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/react-native/guides/variables).