Kdu I18n

# DateTime localization

Support Version

๐Ÿ†• 7.0+

You can localize the datetime with your definition formats.

DateTime formats the below:

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

As seen above, you can define named datetime format (e.g. short, long, etc), and you need to use the options with ECMA-402 Intl.DateTimeFormat (opens new window)

After that, when using the locale messages, you need to specify the dateTimeFormats option of the KduI18n constructor:

const i18n = new KduI18n({
  dateTimeFormats
})

new Kdu({
  i18n
}).$mount('#app')

Template the below:

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

Output the below:

<div id="app">
  <p>Apr 19, 2017</p>
  <p>2017ๅนด4ๆœˆ19ๆ—ฅ(ๆฐด) ๅˆๅ‰2:19</p>
</div>

โ† Number localization โ†’