Vue I18n

日時フォーマット

基本的な使い方

日時を各地域のフォーマットでローカライズできます。

以下、日時のフォーマットの例です：

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のオプションを使う必要があります。

その後、ロケールメッセージを使う際、crateI18nのdatetimeFormatsオプションを指定する必要があります：

const i18n = createI18n({
  datetimeFormats
})

Vue I18nで日時の値をローカライズするには、$dを使います。

備考

$dにはいくつかのオーバーロードがあります。この点については、API リファレンスを参照してください。

備考

日時のローカライズの手段には以下があります：

  • $d（Legacy APIモード & Composition APIモード用）
  • ビルトインのDatetimeFormatコンポーネント（i18n-d）
  • useI18nからエクスポートされたd（Composition APIモード用）

以下は、テンプレートでの$dの使用例です。

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

$dのパラメータとして、第1引数に日時として扱える値（例：Date, timestamp）、第2引数に日時フォーマット名、第3引数にロケールの値を渡します。

出力は以下のようになります：

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

カスタムフォーマット

備考

IEではIntl.DateTimeForamt#formatToPartsのサポートがないため、カスタムフォーマットは使えません。

使いたい場合、polyfillを使う必要があります。

$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コンポーネントにはいくつかのpropsがあります。

tagはタグをセットするプロパティです。

valueは日時として扱える、フォーマットする値をセットするプロパティです。

formatはcreateI18nのdatetimeFormatsオプションで定義されたフォーマットがセットできるプロパティです。

localeはロケールをセットするプロパティです。createI18nのlocaleオプションで指定したロケールの代わりに、このpropで指定したロケールでローカライズされます。

出力は以下のようになります：

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

このコンポーネントが真価を発揮するのはスコープ付きスロットを使う時です。

例えば、日時の元号部分を太字で表示したいなら、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>

複数のスコープ付きスロットを同時に指定することもできます：

<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>

（この例では可読性を高めるためにフォーマットしています）

<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>

備考

サポートされているスコープ付きスロットやその他i18n-dのプロパティの一覧はAPI リファレンスで確認できます。

スコープの解決

DatetimeFormat コンポーネントのスコープ解決は Translation コンポーネントと同じです。

詳細は、こちらのドキュメントをお読みください。