Issue with not supported browser locale

[yemanjo]

If I set my browser language to some unsupported datepicker language e.g. Italian it will throw an error: `RangeError: Maximum call stack size exceeded You can reproduce this bug even on demo page: https://vue-datepicker.netlify.app/, just set you browser language to some unsupported one. Here is screenshot of the error:

Also, workaround to set locale to :locale="{lang: 'en'}" does not work for me as then date picker does not show dates:

Any other way I can force default locale to en?

[VirajSingh19]

In my case the workaround works if I regiser the component globally and pass { lang: 'en' } options

import VueDatePicker from '@mathieustan/vue-datepicker';
Vue.use(VueDatePicker, { lang: 'en' });

[yemanjo]

In my case the workaround works if I regiser the component globally and pass { lang: 'en' } options

import VueDatePicker from '@mathieustan/vue-datepicker';
Vue.use(VueDatePicker, { lang: 'en' });

Nice workaround but it's not a option for me to import it globally.

[marispro]

Solved this issue by downgrade to "0.2.4"

[ItsJoeTurner]

Does anyone have a real solution for this? I would not like to downgrade as I like the newer full-width layout on mobile devices.

[pickmecoach]

Well, I've solved this by removing globally passing lang options, i.e.

import VueDatePicker from '@mathieustan/vue-datepicker'
Vue.use(VueDatePicker);

and pass locale prop directly to component in a format that exactly matches the default locales, there should be all the same keys, no more and no less. For exaple, this is Khmer locale.

{
  lang: {
    name: 'km',
    weekdays: 'អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍'.split('_'),
    months: 'មករា_កុម្ភៈ_មីនា_មេសា_ឧសភា_មិថុនា_កក្កដា_សីហា_កញ្ញា_តុលា_វិច្ឆិកា_ធ្នូ'.split('_'),
    weekStart: 1,
    weekdaysShort: 'អា_ច_អ_ព_ព្រ_សុ_ស'.split('_'),
    monthsShort: 'មករា_កុម្ភៈ_មីនា_មេសា_ឧសភា_មិថុនា_កក្កដា_សីហា_កញ្ញា_តុលា_វិច្ឆិកា_ធ្នូ'.split('_'),
    weekdaysMin: 'អា_ច_អ_ព_ព្រ_សុ_ស'.split('_'),
    ordinal: n => n,
    formats: {
      LT: 'HH:mm',
      LTS: 'HH:mm:ss',
      L: 'DD/MM/YYYY',
      LL: 'D MMMM YYYY',
      LLL: 'D MMMM YYYY HH:mm',
      LLLL: 'dddd, D MMMM YYYY HH:mm'
    },
    buttonValidate: 'Ok',
    buttonCancel: 'បោះបង់',
    rangeHeaderText: 'From %d To %d',
  };
}

The main idea is to get true when checking valid locale here

return this.isValidLocale(lang) ? lang : locales[lang] || this.getLocale(this.getDefaultLang());

otherwise, we get max call stack, because getDefaultLang method is always returns String type, so isValidLocale will always return false and we don't have default locale km in locales

[hendisantika]

is there any way to solve this issue besides switch language?