日期时间本地化

支持版本

🆕 7.0 新增

你可以使用你定义的格式来本地化日期时间。

日期时间格式如下：

  1. const dateTimeFormats = {
  2.   'en-US': {
  3.     short: {
  4.       year: 'numeric', month: 'short', day: 'numeric'
  5.     },
  6.     long: {
  7.       year: 'numeric', month: 'short', day: 'numeric',
  8.       weekday: 'short', hour: 'numeric', minute: 'numeric'
  9.     }
  10.   },
  11.   'ja-JP': {
  12.     short: {
  13.       year: 'numeric', month: 'short', day: 'numeric'
  14.     },
  15.     long: {
  16.       year: 'numeric', month: 'short', day: 'numeric',
  17.       weekday: 'short', hour: 'numeric', minute: 'numeric', hour12: true
  18.     }
  19.   }
  20. }

如上，你可以定义具名的 (例如：short、long 等) 日期时间格式，并需要使用 ECMA-402 Intl.DateTimeFormat 的选项日期时间本地化 - 图1。

之后就像语言环境信息一样，你需要指定 VueI18n 构造函数的 dateTimeFormats 选项：

  1. const i18n = new VueI18n({
  2.   dateTimeFormats
  3. })
  5. new Vue({
  6.   i18n
  7. }).$mount('#app')

模板如下：

  1. <div id="app">
  2.   <p>{{ $d(new Date(), 'short') }}</p>
  3.   <p>{{ $d(new Date(), 'long', 'ja-JP') }}</p>
  4. </div>

输出如下：

  1. <div id="app">
  2.   <p>Apr 19, 2017</p>
  3.   <p>2017年4月19日(水) 午前2:19</p>
  4. </div>