# Vue: `<DateTime>`
URL: https://generaltranslation.com/ru/docs/vue/reference/components/datetime.mdx
Docs index: https://generaltranslation.com/llms.txt
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`                                                                                | Да             | Часовой пояс среды выполнения |
| `formatMatcher`          | Алгоритм выбора формата даты и времени.                                               | `'basic' \| 'best fit'`                                                                 | Да             | `'best fit'`                  |
| `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`                                                                           | Да             | —                             |
| `dayPeriod`              | Формат обозначения части суток, например AM/PM или выражения, специфичные для локали. | `'narrow' \| 'short' \| 'long'`                                                         | Да             | —                             |
| `timeZoneName`           | Формат названия часового пояса.                                                       | `'short' \| 'long' \| 'shortOffset' \| 'longOffset' \| 'shortGeneric' \| 'longGeneric'` | Да             | —                             |

Не сочетайте `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` и форматирует значения с использованием этой локали по умолчанию.

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.