react-moment where to set moment.locale

Question

After reading react-datepicker doc's I have tried changing my date picker language as the doc's instructions:

Globally by calling moment.locale(lang) Picker-specific by providing the locale prop

My question is where to write this setting in a react app.

1- app.js (constructor).

2- date-picker component(constructor).

3-somewhere else...

And how to set it as prop, I have tried :

<DatePicker locale='gr'
      minDate={this.props.minDate}
        selected={this.state.startDate}
        onChange={this.handleChange}
        disabled = {this.props.disabled}
    />;

and it is still showing up as English.

BTW - anyone know what is the language string to Hebrew? thanks.

Quinnquinol

Answer 1

Using this question I was able to figure this so, import langue like:

import 'moment/locale/he';

And for each new moment just set -

moment().locale('he')

It is not really global(one signal setting) for all uses.

moment doc

Quinnquinol

if you do the import 'moment/locale/he' in the root component it would be enough to set the local for all components (I've just tested it) – Theophrastus

Also notice that you can import it dynamically with import(moment/locale/${navigator.language.toLocaleLowerCase()}).then(); – Complex

Answer 2

I think the correct answer if the goal is to set it globally would be to put it in App.js just after the imports.

import moment from 'moment';
// Set moment to FR
moment().locale('fr');
...

function App() {
  return (
...
  )
}

Hereto

Answer 3

If you need moment.locale(lang) globally then try react context api (for React v16.3 or greater). For Hebrew locale code is he, I think.

Tereus