如何使用带日期格式的 i18n

Question

我在 VueJs 3 中使用 Quasar v2。我试图为不同的语言提供不同的日期格式，例如美国的“MM/DD/YYYY”和德国的“DD.MM.YYYY”。这是我目前所拥有的：

<template>
    <p> {{ $d(date, 'long') }} <p> 
</template>

<script lang="ts">
export default defineComponent({
    name: 'PageIndex',
    setup() {
    const date = new Date(2021, 5, 10, 18)
    return {date}
  }
})
</script>

和 i18n.ts 文件：

const i18n = createI18n({
    locale: 'US',
    messages,
    datetimeFormats: {
        'US': {
            short: {
                year: 'numeric',
                month: 'numeric',
                day: 'numeric'
            },
            long: {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
            }

          }
})

现在我要如何指定每种语言的日期格式不同？

Answer 1

通过在 datetimeFormats 下指定一个对象，每个语言环境都可以拥有自己的日期时间格式，其键是语言环境名称，值定义所需的日期时间格式（如 vue-i18n docs).

您已经为 US 添加了一个，您可以为 DE 添加另一个。巧合的是，您想要的格式 DD.MM.YYYY 是使用与 US:

相同的格式选项实现的

const i18n = createI18n({
  locale: 'US',
  messages,
  datetimeFormats: {
    US: {
      short: {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric'
      },
      long: {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      }
    },
    DE: {
      short: {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric'
      },
      long: {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      }
    }
  }
})

demo

如何使用带日期格式的 i18n

how to use i18n with date format

date-format

internationalization

vue.js

quasar

vuejs3