https://github.com/undecaf/vue-material-locales
Locales for the Vue Material datepicker
https://github.com/undecaf/vue-material-locales
datepicker i18n locale vue vuematerial
Last synced: 4 months ago
JSON representation
Locales for the Vue Material datepicker
- Host: GitHub
- URL: https://github.com/undecaf/vue-material-locales
- Owner: undecaf
- License: mit
- Created: 2020-09-11T09:53:00.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-07-24T17:35:20.000Z (about 3 years ago)
- Last Synced: 2025-03-04T13:47:23.955Z (over 1 year ago)
- Topics: datepicker, i18n, locale, vue, vuematerial
- Language: JavaScript
- Homepage:
- Size: 1.55 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Locales for the Vue Material datepicker
This package provides ~75 locales for the [Vue Material datepicker](https://vuematerial.io/components/datepicker),
i.e. day and month names, date formats and button text (all the properties that are required for
[`Vue.material.locale`](https://vuematerial.io/configuration)).
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](https://undecaf.github.io/vue-material-locales/example/)
([example source code](https://github.com/undecaf/vue-material-locales/blob/master/src/components/Demo.vue)).
## Installation as ES6 modules
```shell script
$ npm install @undecaf/vue-material-locales
or
$ yarn add @undecaf/vue-material-locales
```
Registering individual locales:
```javascript 1.8
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:
```javascript 1.8
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 ``
Registering individual locales:
```html
<!-- After the Vue and Vue Material scripts -->
<script src="https://cdn.jsdelivr.net/npm/@undecaf/vue-material-locales/dist/index.min.js">
```
Registering all available locales:
```html
```
## Selecting a locale
```javascript 1.8
// 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:
```javascript 1.8
// 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:
```javascript 1.8
// 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:
```javascript 1.8
{
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](https://www.npmjs.com/package/date-fns)!
## License
Software: [MIT](http://opensource.org/licenses/MIT)
Documentation: [CC-BY-SA 4.0](http://creativecommons.org/licenses/by-sa/4.0/)