Custom datetime formatting like CLDR for $d

[kazupon]

Use-cases

const dateTimeFormats = {
  'en-US': {
    short: 'yyyy-MM-DD', // custom formtting with string
    long: 'yyyy-MM-DD HH:mm:ss'
  },
  'ja-JP': {
    short: 'yyyy/MM/DD',
    long: 'yyyy/MM/DD HH:mm:ss'
  }
}

const i18n = new VueI18n({
  dateTimeFormats
})

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

template:

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

output:

<div id="app">
  <p>2019-11-03</p>
  <p>2019/11/03 22:11:20</p>
</div>

Reference

http://cldr.unicode.org/translation/date-time-1/date-time-patterns

[cederstrom]

Hi, I came across this issue since I want to format date on the yyyy-MM-dd format. Perhaps I could give it a go and submit a PR?

[kazupon]

Thank you for your interest!

As an idea to realize this feature, I have the idea. My idea is the following

• step1: ​​parsing the unicord datetime pattern syntax like formatjs
  • https://github.com/formatjs/formatjs/blob/master/packages/intl-datetimeformat/src/core.ts
  • https://github.com/formatjs/formatjs/blob/master/packages/intl-datetimeformat/src/skeleton.ts
• step2: mapping it to options of Intl.DateTimeFormat.

I'm working on the new compiler of vue-i18n-next for Vue 3. After the major release of vue-i18n-next, I'll plan to extend new compiler.

I'm sure there are other good ideas, so I'd love to hear your idea. :pray:

[Geek-Jokey]

Is it can be use now? @kazupon I can't wait to use it

[cederstrom]

Sorry but I never got time to give this a try. And now I have moved on to other projects :/