[Vuejs]-How to use i18n with date format

by

4👍

✅

Each locale can have its own date-time format by specifying an object under datetimeFormats, whose key is the locale name, and value defines the desired date-time format (as seen in the vue-i18n docs).

You have one already for US, and you can add another for DE. Coincidentally, the format you want DD.MM.YYYY is achieved with the same format option you have for 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

👤tony19

Leave a comment