日時フォーマット

基本的な使い方

独自の定義フォーマットで日時をローカライズできます。

以下の通り日時フォーマットが行われます：

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

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

const i18n = createI18n({
  datetimeFormats
})

Vue I18nでDateTime値をローカライズするには、$dを使用します。

NOTE

VueI18n v9ではオプション名はdatetimeFormatsであり、dateTimeFormatsではありません。詳細についてはmigration guideをご覧ください

TIP

$dには複数のオーバーロードがあります。より詳しい情報はAPI Referenceをご覧ください

NOTE

ローカライズをサポートする方法は以下の通りです：

• $d (レガシーアプリケーションモードとコンポジションAPIモード向け)
• 内蔵DatetimeFormatコンポーネント (i18n-d)
• useI18nからエクスポートされたd (コンポジションAPIモード向け)

テンプレートでの$dの使用例は次の通りです：

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

最初の引数は日時可能な値（例：Date、タイムスタンプ）をパラメータとして渡し、2番目の引数は日時フォーマット名をパラメータとして渡します。最後の引数はロケール値をパラメータとして渡します。

結果は以下のようになります：

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

カスタムフォーマット

$dは完全にフォーマットされた日時文字列を返すため、全体としてしか使用できません。フォーマットされた日時の中の一部（分数桁など）をスタイル設定したい場合、$dだけでは不十分です。このような場合、DatetimeFormatコンポーネント(i18n-d)が役立ちます。

最小限のプロパティでi18n-dは、設定されたDOM要素にラップされた$dと同じ出力を生成します。

以下のテンプレート：

<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プロパティはcreateI18nのdatetimeFormatsオプションで定義されたフォーマットを設定するプロパティです。

localeプロパティはロケールを設定するプロパティです。これはcreateI18nのlocaleオプションではなく、このプロパティで指定されたロケールでローカライズされます。

以下の出力が得られます：

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

（結果の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

サポートされているすべてのスコープ付きスロットとその他のi18n-dのプロパティの一覧はAPI Referenceで見つけることができます

スコープ解決

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

こちらをご参照ください