日期时间格式化

基本用法

您可以使用自己的定义格式对日期时间进行本地化。

以下是对日期时间的格式化：

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 对日期时间值进行本地化，请使用 $d。

NOTE

请注意，在 VueI18n v9 中选项名称是 datetimeFormats，而不是 dateTimeFormats。要了解更多详情，请访问 迁移指南

TIP

$d 有多个重载。您可以在 API 参考 中了解更多信息

NOTE

支持本地化的一些方法包括：

• $d（用于传统 API 模式和组合 API 模式）
• 内置 DatetimeFormat 组件（i18n-d）
• 从 useI18n 导出的 d（用于组合 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 属性是用来设置由 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 参考 中找到

作用域解析

DatetimeFormat 组件的作用域解析与 Translation 组件相同。

参见 此处