# General Translation React SDKs (gt-react, gt-next, gt-react-native): `` URL: https://generaltranslation.com/ru/docs/react/reference/components/datetime.mdx Docs index: https://generaltranslation.com/llms.txt Description: Форматирование даты и времени для активной локали. Справочник по API для компонента ``. Компонент `` отображает значение `Date` как локализованные дату, время или и то и другое. Он поддерживает пользовательские параметры форматирования и переопределение локали. *Доступно в `gt-react`, `gt-next`, `gt-tanstack-start` и `gt-react-native`.* ## Обзор [#overview] Передайте `Date` как `children`, и `` отформатирует его в соответствии с активной локалью. ```tsx {new Date(1738010355000)} // Вывод: 1/27/2025 ``` Все форматирование обрабатывается локально с помощью [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). *Примечание: `` может вызывать ошибки гидратации 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/DateTimeFormat#options). К распространённым параметрам относятся: | Параметр | Описание | Тип | Необязательно | По умолчанию | | ------------------------ | ---------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------ | | `localeMatcher` | Алгоритм сопоставления локалей. | `'lookup' \| 'best fit'` | Да | `'best fit'` | | `calendar` | Система календаря, например `gregory`, `chinese` или `persian`. | `string` | Да | `'gregory'` | | `numberingSystem` | Система нумерации, например `latn` или `arab`. | `string` | Да | `'latn'` | | `hour12` | Определяет, использовать ли 12-часовой формат времени. Переопределяет `hourCycle`. | `boolean` | Да | Зависит от локали | | `hourCycle` | Цикл часов, используемый в формате времени. | `'h11' \| 'h12' \| 'h23' \| 'h24'` | Да | Зависит от локали | | `timeZone` | Часовой пояс IANA или смещение относительно UTC. | `string` | Да | Часовой пояс среды выполнения | | `weekday` | Полнота названия дня недели. | `'long' \| 'short' \| 'narrow'` | Да | — | | `era` | Полнота обозначения эры. | `'long' \| 'short' \| 'narrow'` | Да | — | | `year` | Числовое или двузначное обозначение года. | `'numeric' \| '2-digit'` | Да | `'numeric'`, если не заданы стили или компоненты | | `month` | Числовой или текстовый формат месяца. | `'numeric' \| '2-digit' \| 'long' \| 'short' \| 'narrow'` | Да | `'numeric'`, если не заданы стили или компоненты | | `day` | Числовое или двузначное обозначение дня. | `'numeric' \| '2-digit'` | Да | `'numeric'`, если не заданы стили или компоненты | | `dayPeriod` | Полнота меток, таких как «утром» или «ночью». | `'long' \| 'short' \| 'narrow'` | Да | — | | `hour` | Числовое или двузначное обозначение часа. | `'numeric' \| '2-digit'` | Да | — | | `minute` | Числовое или двузначное обозначение минуты. | `'numeric' \| '2-digit'` | Да | — | | `second` | Числовое или двузначное обозначение секунды. | `'numeric' \| '2-digit'` | Да | — | | `fractionalSecondDigits` | Количество цифр в дробной части секунды. | `1 \| 2 \| 3` | Да | — | | `timeZoneName` | Полнота и стиль обозначения часового пояса. | `'long' \| 'short' \| 'shortOffset' \| 'longOffset' \| 'shortGeneric' \| 'longGeneric'` | Да | — | | `formatMatcher` | Алгоритм сопоставления параметров компонентов с форматом локали. | `'basic' \| 'best fit'` | Да | `'best fit'` | | `dateStyle` | Предустановленный формат даты. | `'full' \| 'long' \| 'medium' \| 'short'` | Да | — | | `timeStyle` | Предустановленный формат времени. | `'full' \| 'long' \| 'medium' \| 'short'` | Да | — | * `dateStyle` и `timeStyle` можно использовать вместе, но не с параметрами компонентов, такими как `weekday`, `year`, `month`, `day`, `hour`, `minute` или `second`. * `hour12` переопределяет `hourCycle`. * `dayPeriod` влияет только на форматы с 12-часовым представлением времени. * Поддерживаемые календари, системы нумерации, обозначения часовых поясов и значения параметров зависят от среды выполнения JavaScript. См. [документацию по параметрам `Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options), чтобы узнать об актуальных доступных параметрах и поведении среды выполнения. ### `locales` [#locales] **Тип** `string[]` · **Необязательно** · **По умолчанию** Активная локаль Локали, для которых выполняется форматирование. Если параметр не указан, используется активная локаль. См. [аргумент locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). ### `name` [#name] **Тип** `string` · **Необязательно** Необязательное имя поля даты, используемое для метаданных. ## Примеры [#examples] *В примерах импорт выполняется из `gt-react`; импортируйте из пакета вашего фреймворка.* ```tsx title="EventDate.tsx" import { DateTime } from 'gt-react'; export default function EventDate({ event }) { return {event.date}; // [!code highlight] } ``` ```tsx title="EventDate.tsx" import { DateTime } from 'gt-react'; export default function EventDate({ event }) { return {event.date}; // [!code highlight] } ``` ```tsx title="EventDate.tsx" import { T, DateTime } from 'gt-react'; export default function EventDate({ event }) { return ( The time of the event is {event.date}. // [!code highlight] ); } ``` ```tsx title="EventDate.tsx" import { DateTime } from 'gt-react'; export default function EventDate({ event }) { return ( {event.date} ); } ``` ## Как избежать ошибок гидратации [#hydration] Поскольку `` форматирует даты с учётом локальных настроек, на сервере и на клиенте он может выдавать разный результат. Если React сравнивает HTML, сгенерированный на сервере, с результатом рендера на клиенте и они не совпадают, возникает ошибка гидратации. Обычно это происходит, когда: * **Явно не задан `timeZone`.** Сервер может работать в UTC, тогда как браузер использует местное время, поэтому временная метка может рендериться как `"1/27/2025"` на сервере и как `"1/28/2025"` на клиенте. * **Локаль по умолчанию различается в разных окружениях.** Несовпадение локали по умолчанию приводит к разным строкам (например, `"27/01/2025"` и `"1/27/2025"`). Явно зафиксируйте и локаль, и часовой пояс, чтобы сервер и клиент всегда выдавали одну и ту же строку: ```tsx {event.date} ``` ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.