# vue: <DateTime>
URL: https://generaltranslation.com/ru/docs/vue/reference/components/datetime.mdx
---

title: "<DateTime>"
description: Форматирует дату или время в соответствии с активной локалью. Справочник API компонента <DateTime>.

---

Компонент `<DateTime>` форматирует обязательное значение `value`, содержащее дату или время, с помощью `Intl.DateTimeFormat`. Используйте его отдельно или в качестве переменной времени выполнения внутри [`<T>`](/docs/vue/reference/components/t).

## Обзор [#overview]

Передайте в `value` объект `Date`, количество миллисекунд с начала эпохи или строку даты:

```vue
<DateTime
  :value="publishedAt"
  :options="{ dateStyle: 'medium', timeZone: 'UTC' }"
/>
```

Форматирование выполняется локально. Значение не включается в исходный текст расширенного перевода.

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

* `Date` форматируется напрямую. Числа и строки сначала передаются в конструктор JavaScript `Date`.
* Для `null` и строк, состоящих только из пробельных символов, ничего не отображается. Некорректная строка даты отображается без изменений.
* Разбор строк дат и часовые пояса по умолчанию определяются средой выполнения JavaScript. Используйте однозначную временную метку и задавайте `timeZone`, если вывод должен совпадать во всех средах.
* Дочерние элементы слота форматтера игнорируются. Всегда указывайте `value` и используйте самозакрывающийся тег.
* Компонент не добавляет HTML-обёртку.

### Разрешение локалей

Если активная локаль совпадает с настроенной локалью по умолчанию, форматирование использует только локаль по умолчанию и игнорирует `locales`. Для любой другой активной локали автономный форматтер сначала использует явно указанные `locales`, затем активную локаль и, наконец, локаль по умолчанию.

В [`<T>`](/docs/vue/reference/components/t) исходный резервный контент использует локаль по умолчанию. Для переведённого контента сначала используется активная локаль, затем локаль по умолчанию; явно указанный prop `locales` игнорируется.

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

| Пропс                 | Описание                                         | Тип                                | Необязательно | По умолчанию               |
| --------------------- | ------------------------------------------------ | ---------------------------------- | ------------- | -------------------------- |
| [`value`](#value)     | Значение даты для форматирования.                | `Date \| number \| string \| null` | Нет           | —                          |
| [`options`](#options) | Параметры, передаваемые в `Intl.DateTimeFormat`. | `Intl.DateTimeFormatOptions`       | Да            | `{}`                       |
| [`locales`](#locales) | Предпочтительные локали для форматирования.      | `string[]`                         | Да            | Порядок разрешения локалей |

### `value`

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

Значение для форматирования. Число представляет количество миллисекунд с начала эпохи Unix. При передаче строки предпочтительно использовать временную метку в формате ISO 8601, поскольку другие форматы дат могут интерпретироваться по-разному в разных средах выполнения.

### `options`

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

Параметры, передаваемые в реализацию `Intl.DateTimeFormat` среды выполнения JavaScript. Распространённые параметры:

| Параметр                 | Описание                                                        | Тип                                                       | Необязательный | По умолчанию                  |
| ------------------------ | --------------------------------------------------------------- | --------------------------------------------------------- | -------------- | ----------------------------- |
| `localeMatcher`          | Алгоритм сопоставления локалей.                                 | `'lookup' \| 'best fit'`                                  | Да             | `'best fit'`                  |
| `calendar`               | Календарная система, например `gregory` или `japanese`.         | `string`                                                  | Да             | Зависит от локали             |
| `numberingSystem`        | Система нумерации, например `latn` или `arab`.                  | `string`                                                  | Да             | Зависит от локали             |
| `timeZone`               | Имя часового пояса IANA, например `UTC` или `America/New_York`. | `string`                                                  | Да             | Часовой пояс среды выполнения |
| `dateStyle`              | Предустановка формата даты.                                     | `'full' \| 'long' \| 'medium' \| 'short'`                 | Да             | —                             |
| `timeStyle`              | Предустановка формата времени.                                  | `'full' \| 'long' \| 'medium' \| 'short'`                 | Да             | —                             |
| `hour12`                 | Использовать ли 12-часовой формат.                              | `boolean`                                                 | Да             | Зависит от локали             |
| `hourCycle`              | Часовой цикл.                                                   | `'h11' \| 'h12' \| 'h23' \| 'h24'`                        | Да             | Зависит от локали             |
| `weekday`                | Формат названия дня недели.                                     | `'long' \| 'short' \| 'narrow'`                           | Да             | —                             |
| `era`                    | Формат обозначения эры.                                         | `'long' \| 'short' \| 'narrow'`                           | Да             | —                             |
| `year`                   | Формат отображения года.                                        | `'numeric' \| '2-digit'`                                  | Да             | —                             |
| `month`                  | Формат отображения месяца.                                      | `'numeric' \| '2-digit' \| 'long' \| 'short' \| 'narrow'` | Да             | —                             |
| `day`                    | Формат отображения дня.                                         | `'numeric' \| '2-digit'`                                  | Да             | —                             |
| `hour`                   | Формат отображения часа.                                        | `'numeric' \| '2-digit'`                                  | Да             | —                             |
| `minute`                 | Формат отображения минут.                                       | `'numeric' \| '2-digit'`                                  | Да             | —                             |
| `second`                 | Формат отображения секунд.                                      | `'numeric' \| '2-digit'`                                  | Да             | —                             |
| `fractionalSecondDigits` | Точность долей секунды.                                         | `1 \| 2 \| 3`                                             | Да             | —                             |
| `timeZoneName`           | Формат названия часового пояса.                                 | `string`                                                  | Да             | —                             |

Не сочетайте `dateStyle` или `timeStyle` с отдельными полями даты и времени в средах выполнения, где такое сочетание не поддерживается. Полный набор параметров, определяемый средой выполнения, см. в [параметрах `Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).

### `locales`

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

Предпочтительные коды локалей в формате BCP 47 для автономного форматирования. Они проверяются раньше активной локали и локали по умолчанию, но только если активная локаль не является настроенной локалью по умолчанию.

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

```vue title="PublishedAt.vue"
<script setup lang="ts">
import { DateTime, T } from 'gt-vue';

defineProps<{ publishedAt: Date }>();
</script>

<template>
  <T>
    Опубликовано
    <DateTime
      :value="publishedAt"
      :options="{ dateStyle: 'long', timeZone: 'UTC' }"
    />.
  </T>
</template>
```

## Серверный рендеринг [#ssr]

Серверная и клиентская среды могут использовать разные локали или часовые пояса по умолчанию. Из-за этого при гидратации формируются разные строки. Явно укажите одну и ту же локаль в обоих плагинах [`createGT()`](/docs/vue/reference/functions/create-gt) и зафиксируйте часовой пояс форматтера:

```vue
<DateTime
  :value="publishedAt"
  :locales="['en-US']"
  :options="{ dateStyle: 'medium', timeZone: 'UTC' }"
/>
```

Заранее загрузите один и тот же каталог локали перед серверным рендерингом и гидратацией на клиенте. Если активная локаль совпадает с настроенной локалью по умолчанию, учитывайте, что компонент намеренно игнорирует явно заданный список `locales` и форматирует значения с использованием этой локали по умолчанию.