@undecaf/vue-material-locales

Locales for the Vue Material datepicker

This package provides ~75 locales for the Vue Material datepicker, i.e. day and month names, date formats and button text (all the properties that are required for Vue.material.locale).

All locales combined comprise about 50 kB, ~700 bytes/locale. Locales can be installed individually or all together.

A simple online example is available here (example source code).

Installation as ES6 modules

$ npm install @undecaf/vue-material-locales
    or
$ yarn add @undecaf/vue-material-locales

Registering individual locales:

import VueMaterialLocales from '@undecaf/vue-material-locales'
import en from '@undecaf/vue-material-locales/dist/locale/en-US'
import de from '@undecaf/vue-material-locales/dist/locale/de'
    ...
// This must come after Vue.use(VueMaterial):
Vue.use(VueMaterialLocales, [ en, de ])

Registering all available locales:

import VueMaterialLocales from '@undecaf/vue-material-locales'
import locales from '@undecaf/vue-material-locales/dist/locale'
    ...
// This must come after Vue.use(VueMaterial):
Vue.use(VueMaterialLocales, locales)

Installation as <script>

Registering individual locales:

<!-- After the Vue and Vue Material scripts -->
<script src="https://cdn.jsdelivr.net/npm/@undecaf/vue-material-locales/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@undecaf/vue-material-locales/dist/locale/en-US/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@undecaf/vue-material-locales/dist/locale/de/index.js"></script>

Registering all available locales:

<!-- After the Vue and Vue Material scripts -->
<script src="https://cdn.jsdelivr.net/npm/@undecaf/vue-material-locales/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@undecaf/vue-material-locales/dist/locale/index.js"></script>

Selecting a locale

// Assuming that 'en-US' and 'de' have been registered
vm.$material.selectLocale('de')
vm.$material.selectLocale('en-US')

selectLocale() returns the language tag that was actually selected, or undefined if no suitable locale could be found.

Language tags are treated case-insensitively, and both '-' and '_' are valid subtag separators.

If the requested locale is not available, a more specific locale is considered first, and then a more general one. The search is carried out in registration order:

// Assuming that 'en-US' and 'de' have been registered
vm.$material.selectLocale('de-DE')  // -> 'de', locale set
vm.$material.selectLocale('en')     // -> 'en-US', locale set
vm.$material.selectLocale('en-AU')  // searches 'en-AU', then 'en' -> 'en-US', locale set
vm.$material.selectLocale('it')     // -> undefined, locale unchanged

Fallback locales can be given as additional arguments:

// Assuming that 'en-US' and 'de' have been registered
vm.$material.selectLocale('de-AT', 'en')  // -> 'de', locale set
vm.$material.selectLocale('it', 'de-DE')  // -> 'de', locale set
vm.$material.selectLocale('it', 'en')     // -> 'en-US', locale set
vm.$material.selectLocale('jp', 'it')     // -> undefined, locale unchanged

List of registered locales

Object vm.$material.locales contains registered locales by language tag:

{
    de:      { tag: 'de',    /* ... Vue.material.locale properties for German     */ },
    'en-US': { tag: 'en-US', /* ... Vue.material.locale properties for US English */ },
    ...
}

Credits

Date/time formats are based on the locales of the marvelous date-fns!

License

Software: MIT

Documentation: CC-BY-SA 4.0