reactjslocalizationreact-datepicker

Change locale in react-datepicker

I am using react-datepicker NPM package,
I tried to follow documentation but I was unable to import 

registerLocale

and 

setDefaultLocale

from react-datepicker

Do you see where I make mistake?

 import DatePicker from 'react-datepicker';



...
    <DatePicker
            { ...this.props }
            dateFormat={ this.dateFormat }
            ref={ (node) => { this.ref = node; } }
            onClickOutside={ this.clickOutside }
          />
...

this is code where I want to import locale.

Solution

  • First of all make sure you are using the latest version of the plugin (2.0.0). Then you need to also install the date-fns module, but for the moment the react-datepicker is working with the 2.0.0-alpha.23 version.

    Then you need to import and register the locale you want and finally add the locale property to the DatePicker

    so (after installing the correct versions)

    import DatePicker, { registerLocale } from "react-datepicker";
import el from "date-fns/locale/el"; // the locale you want
registerLocale("el", el); // register it with the name you want

    and use it

    <DatePicker 
    locale="el"
    ...
/>

    Working demo at https://codesandbox.io/s/7j8z7kvy06