DatePicker translation

[SzNagyMisu]

Hullo there,
Is there any possibility to internationalize a DatePicker component without the need to install the whole plugin with Vue.use(Uiv, { locale: myLocale })?
For example being able to pass a locale object / json in props?
Would appreciate a lot.

Thanks in advance!

[wxsms]

this might work:

import locale from 'uiv/src/locale'

locale.use(yourLocale)

[SzNagyMisu]

Tried it, didn't work. Thanks for it anyway.

First, I put it in src/main.js, then in the component that uses UivDatePicker, but had absolutely no effect. After, I thought I had to use UivDatePicker from the source code, so I changed

import { DatePicker as UivDatePicker } from 'uiv'

to

import UivDatePicker from 'uiv/src/components/datepicker/DatePicker'

and then it had the strange effect of translating everything to undefined. So I had neither month nor weekdays, nor even today and clear button texts.

[SzNagyMisu]

A small modification on localeMixin would solve my problem, though.
What if - as I suggested when opening the issue - I could send a locale object as props?

So src/locale/index.js would look like this:

import locale from '../locale'
export default {
  methods: {
    t (...args) {
      return locale.t.apply(this, args)
    }
  },
  props: { locale: Object },
  created () { locale.use(this.locale) }
}

[wxsms]

Thanks. This looks good. PR is welcome.

[SzNagyMisu]

Great!
I'm on it!

[SzNagyMisu]

Almost ready with th PR, but ran into a problem.
I Made the changes, updated the docs, wrote the test which passes, but when I run the whole suite, it breaks 9 previous tests.
The problem is that locale.use(myLocale) changes the lang globally. So if I try

<template>
  <date-picker :locale="localeFR" />
  <date-picker :locale="localeHU" />
</template>

both date-pickers will use the HU locale. Accordingly, every test that checked on the text of any uiv component will break because it will compare the English translation to the Hungarian one. Also the whole documentation may change to use the Hungarian locale.

Maybe, would it be possible to pass a locale property to the options parameter of the function t? Then it could use this for custom localization.

[wxsms]

I see. you should not use created () { locale.use(this.locale) } then. You may try to pass the locale prop to t, this should be better, but you have to also modify the t function, something like this:

export const t = function (path, options) {
  ...
  let current = options.$$locale || lang
  ...
}

But another problem is, if you also have vue-i18n installed, this won't work. you have to check if $$locale exist and apply such translation and return the value before using i18nHandler.

[wxsms]

wait a min... I just notice that, you can achieve your goal (internationalize a DatePicker component without the need to install the whole plugin) by using vue-i18n. since this will skip the plugin's translation function.

[SzNagyMisu]

Opened the PR.

BTW, why the $$ for options.$$locale?

[wxsms]

because the options is for vue-i18n plugin, $$ makes it not that easy to conflict with something.

[wxsms]

It's done in v0.24.0, thanks.