Change locale in react-datepicker

Question

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.

Answer 1

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

Answer 2

For those who don't want to depend on date-fns module you can define your own localization.

Here's a working demo on CodeSandbox.

const days = ['Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct', 'Pz'] const months = ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık']  const locale = {   localize: {     day: n => days[n],     month: n => months[n]   },   formatLong: {     date: () => 'mm/dd/yyyy'   } }  <DatePicker locale={locale} />