@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.

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'are 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:

// Assuming that 'en-US' and 'de'are 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. A more general locale will be considered only for the last argument, more specific locales will be considered for any argument:

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

Credits

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

License

Software: MIT

Documentation: CC-BY-SA 4.0