Changing the config.locale option doesn't update the locale used

[ghost]

I'm submitting a ...

[x] Bug report => search github for a similar issue or PR before submitting
[ ] Feature request
[ ] Other, please describe

Tell about your platform

• flatPickr version : 4.4.4
• Vue.js version : 2.5.16
• This package version : 7.0.1

Current behavior
Changing the config.locale option doesn't update the locale used in the config watcher.

I have got it to work with adding the following after this.fp.set(safeConfig):

this.fp.l10n = safeConfig.locale
this.fp.redraw()

[ankurk91]

@renzo-s
Can you setup a jsfiddle?

[ghost]

Not at the moment,

but the setup is simple

<template>
  <flat-pickr config="config" />
</template>

<script>
import { Dutch } from 'flatpickr/dist/l10n/nl.js'
import { english } from 'flatpickr/dist/l10n/default.js'

const langs = {
    en: english,
    nl: Object.assign({}, english, Dutch)
}

// ... vue inst with the data

methods() {
  setNL() {
     this.config.locale = langs['nl']
  }
  setEN() {
     this.config.locale = langs['en']
  }
}
</script>

And trigger the methods with a button or something

[ankurk91]

Ok, i will check.

[ghost]

Quick fix we opted for was moving the mounted() contents to an init method and in de the config watcher call

this.fp.destroy()
this.fp = null
this.init()

This is quick and dirty but seems like the only way to also update the input value with the correct altFormat.

Hope this can be a nice enhancement in the future, or some help for others trying to implement l10n switching.

Thanks for the quick replies

[ankurk91]

@renzo-s
How good if parent flatpickr library handles this automatically for us?

[ghost]

😄even better. Have not investigated the lib enough to open a ticket though

[ankurk91]

Flatpickr does support changing locale dynamically.
https://github.com/flatpickr/flatpickr/blob/aa35684adc2cde8037776dfd583e1c74987db35b/src/index.ts#L2104-L2119

We need to figure out a way to implement in this vue component.

flatpickrInstance.set('locale', importedLocaleObjectGoesHere)

[ankurk91]

@renzo-s
Finally I made it, check the commit above, i will release this after more testing.

[ankurk91]

Fixed in v7.0.2