How do you change starting day of the week wtih Flatpickr?

Question

I want to set my language and change the starting date. The application is in React.

<Flatpickr
className="form-control cdr-filter-input-flatpickr"
name="date"
value={date}
options={options}
onChange={date => {event}
/>

And the options:

const options = {
locale:{
    ...'fr',
    firstDayOfWeek:3
},
dateFormat: 'Y-m-d H:i',
time_24hr: true,
};

What does it do? It doesn't set the language to French but it does set the starting date correctly. If I do "locale:'fr'", I cannot modify the firstDayOfWeek anymore.

According to https://github.com/flatpickr/flatpickr/issues/1398, it should work. Am I doing something wrong?

Answer 1

I managed to solve it. It had a few problems, @Bharath set me on the correct way to figure it out.

I had to change

import 'flatpickr/dist/l10n/';

to

import {English} from  'flatpickr/dist/l10n/default.js';
import {Dutch} from  'flatpickr/dist/l10n/nl.js';
import {French} from  'flatpickr/dist/l10n/fr.js';

These has to be written in the same way as index.js file in \node_modules\flatpickr\dist\l10n. Somewhere at the bottom, they declare var l10n = {...} around line 3529. So look for that.

Then I had to write a switch case to set my locale settings correctly. I ended up doing this in an helper file

let options = {
  //do your own settings
}
switch(lang)
{
  case "en":
    options.locale={
      ...English,
      firstDayOfWeek:startingDay
    }
    break;
  ...
}

and then:

<Flatpickr
className="form-control cdr-filter-input-flatpickr"
name="date"
value={date}
options={options}
onChange={date => {event}
/>