Форматирование даты и времени

Основное использование

Вы можете локализовать дату и время с помощью ваших собственных форматов.

Формат даты и времени показан ниже:

const datetimeFormats = {
  'en-US': {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    },
    long: {
      year: 'numeric', month: 'short', day: 'numeric',
      weekday: 'short', hour: 'numeric', minute: 'numeric'
    }
  },
  'ja-JP': {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    },
    long: {
      year: 'numeric', month: 'short', day: 'numeric',
      weekday: 'short', hour: 'numeric', minute: 'numeric', hour12: true
    }
  }
}

Как видно выше, вы можете определить именованный формат даты и времени (например, short, long и т.д.), и вам нужно использовать параметры с ECMA-402 Intl.DateTimeFormat

После этого, при использовании локальных сообщений, необходимо указать параметр datetimeFormats функции createI18n:

const i18n = createI18n({
  datetimeFormats
})

Чтобы локализовать значение даты и времени с помощью Vue I18n, используйте $d.

NOTE

Обратите внимание, что имя параметра — datetimeFormats в VueI18n v9, а не dateTimeFormats. Подробнее см. в гиде по миграции

TIP

$d имеет несколько перегрузок. Вы можете получить больше информации в справочнике по API

NOTE

Некоторые способы поддержки локализации:

• $d (для Legacy API режима и Composition API режима)
• встроенный компонент DatetimeFormat (i18n-d)
• экспортированная функция d из useI18n (для Composition API режима)

Ниже приведен пример использования $d в шаблоне:

<p>{{ $d(new Date(), 'short') }}</p>
<p>{{ $d(new Date(), 'long', 'ja-JP') }}</p>

Первый аргумент — это значение даты и времени (например, Date, временная метка) в качестве параметра, второй аргумент — имя формата даты и времени в качестве параметра. Последний аргумент — значение локали в качестве параметра.

В результате получаем:

<p>Apr 19, 2017</p>
<p>2017年4月19日(水) 午前2:19</p>

Пользовательское форматирование

$d возвращает строку с полностью отформатированными датой и временем, которая может использоваться только как целое. В ситуациях, когда необходимо стилизовать отдельную часть отформатированной даты и времени (например, дробные цифры), $d недостаточно. В таких случаях поможет компонент DatetimeFormat (i18n-d).

С минимальным набором свойств i18n-d генерирует тот же вывод, что и $d, обернутый в сконфигурированный элемент DOM.

Следующий шаблон:

<i18n-d tag="p" :value="new Date()"></i18n-d>
<i18n-d tag="p" :value="new Date()" format="long"></i18n-d>
<i18n-d tag="p" :value="new Date()" format="long" locale="ja-JP-u-ca-japanese"></i18n-d>

Компонент DatetimeFormat имеет некоторые свойства.

Свойство tag — это свойство для установки тега.

Свойство value — это свойство для установки значения даты и времени, которое будет отформатировано.

Свойство format — это свойство, с помощью которого можно задать формат, определенный параметром datetimeFormats функции createI18n.

Свойство locale — это свойство для установки локали. Локализация производится с использованием указанной в этом свойстве локали вместо локали, указанной в параметре locale функции createI18n.

Это произведет следующий вывод:

<p>11/3/2020</p>
<p>11/03/2020, 02:35:31 AM</p>
<p>令和2年11月3日火曜日 午前2:35:31 日本標準時</p>

Но настоящая мощь этого компонента проявляется, когда он используется с scoped slots.

Допустим, есть необходимость отобразить часть даты и времени (эпоху) жирным шрифтом. Это можно реализовать, указав элемент scoped slot era:

<i18n-d tag="span" :value="new Date()" locale="ja-JP-u-ca-japanese" :format="{ key: 'long', era: 'narrow' }">
  <template #era="props">
    <span style="color: green">{{ props.era }}</span>
  </template>
</i18n-d>

Указанный выше шаблон приведет к следующему HTML:

<span><span style="color: green;">R</span>2年11月3日火曜日 午前2:35:31 日本標準時</span>

Можно одновременно указать несколько scoped slots:

<i18n-d tag="span" :value="new Date()" locale="ja-JP-u-ca-japanese" :format="{ key: 'long', era: 'narrow' }">
  <template #era="props">
    <span style="color: green">{{ props.era }}</span>
  </template>
  <template #literal="props">
    <span style="color: green">{{ props.literal }}</span>
  </template>
</i18n-d>

(этот результат HTML был отформатирован для лучшей читаемости)

<span>
  <span style="color: green;">R</span>2
  <span style="color: green;">年</span>11
  <span style="color: green;">月</span>3
  <span style="color: green;">日</span>火曜日
  <span style="color: green;"> </span>午前3
  <span style="color: green;">:</span>09
  <span style="color: green;">:</span>56
  <span style="color: green;"> </span>日本標準時
</span>

NOTE

Полный список поддерживаемых scoped slots, а также другие свойства i18n-d можно найти в справочнике по API

Разрешение области видимости

Разрешение области видимости компонента DatetimeFormat аналогично компоненту Translation.

См. здесь