33

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.

6 Answers 6

66

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

3
  • God bless you! I couldn't find this dependency from an alpha-level external library anywhere in the react-datepicker documentation. May 20, 2019 at 12:49
  • Any solution for non alpha version of date-fns?
    – Hidden
    Jun 18, 2019 at 19:16
  • Time in extended ui is not localized, need use prop timeCaption: string Nov 10 at 7:43
28

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} />
4
  • 2
    This does not work. TypeError: formatLong.date is not a function Nov 15, 2021 at 12:06
  • 1
    I've updated the answer and also put a CodeSandbox link.
    – ozgrozer
    Dec 31, 2021 at 15:57
  • This worked for me although I had to add a match property (empty callback) in locale to make it work properly. I wanted to make appear short month via property useShortMonthInPicker alongside showMonthInPicker but I still see full month. I looked at documentation of Locale type from date-fns but I didn't see how to do that
    – Klaymant
    Feb 23, 2022 at 17:00
  • 1
    Sounds good - however, for reacent react-datepicker the package itselfe depends on date-fns, so I don't know how useful this is (if it actually reduces the bundle size)
    – giraff
    Apr 18, 2022 at 13:43
6
import React, { Component } from 'react';
import DatePicker, { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import ja from "date-fns/locale/ja";

registerLocale("ja", ja);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      date
    });
  }

  render() {
    return (
      <div className="App">
        <body>
          <DatePicker
            dateFormat="yyyy/MM/dd"
            selected={this.state.date}
            onChange={this.handleChange}
            locale='ja'
          />
        </body>
      </div>
    );
  }
}

export default App;

I could get the result you wanted. And I tried to make it with moment library but it didn't work on my code. sorry

1
  • the npm libraries I used: * date-fns@next * react-datepicker
    – t.kuriyama
    Jan 28, 2019 at 12:48
6

In case you want to use a locale, that is not supported by date-fns (and those are quite few), you can do a shim.

const monthsBG = ['Януари', 'Февруари', 'Март', 'Април', 'Май', 'Юни', 'Юли', 'Август', 'Септември', 'Октомври', 'Ноември', 'Декември'];
const daysBG = ['нед', 'пон', 'вт', 'ср', 'четв', 'пет', 'съб'];

registerLocale('bg', {
  localize: {
    month: n => monthsBG[n],
    day: n => daysBG[n]
  }, 
  formatLong:{} 
});

and then you can use this locale as any other

<DatePicker
  locale="bg"
  ...
/>
1
  • Thank u, dude! Greetings from BG. Jan 29, 2021 at 12:16
3

You don't even need to use registerLocale, just use import variable name ja without quotes :

<DatePicker
  dateFormat="yyyy/MM/dd"
  selected={this.state.date}
  onChange={this.handleChange}
  locale=ja
/>

You can also set the default locale for all date picker fields with setDefaultLocale :

constructor (props) {
    registerLocale("ja", ja);
    setDefaultLocale("ja");
}

Hope this helps.

2

For dynamic locale imports you could use this code. However, you will get a larger package with dynamic imports:

constructor(props) {
    const getLocale = locale => require(`date-fns/locale/${this.props.language}/index.js`)
    this.locale = getLocale(this.props.language);
}

And then use

<DatePicker locale={this.locale} />

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.