CODEWITHSUNDEEP
reactjslocalizationreact-datepicker
Stevan Tosic
Stevan Tosic

Reputation: 7199

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.

Upvotes: 35

Views: 99203

Answers (8)

czechaj
czechaj

Reputation: 13

just an addition to ozgrozer's answer:

if your locale starts from Monday, you have to format day and set calendarStartDay attribute of ReactDatePicker to 1. Here are the changes:

 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" ];


 export const datepickerLocale = {
      localize: {
        day: (n: number) => days[n - 1] ?? "Pz",
        month: (n: number) => months[n]
      },
      formatLong: {
        date: () => "dd/MM/yyyy",
        time: () => "HH:mm",
        dateTime: () => "dd/MM/yyyy HH:mm"
      }
    };

   <ReactDatePicker
                          calendarStartDay={1}
                          locale={datepickerLocale}
                         
                          {...others}
                        />

Upvotes: 0

Trinh Hieu
Trinh Hieu

Reputation: 805

Here's how to do it for the latest version 2024+

npm install date-fns

npm install react-datepicker (For .js)

npm i @types/react-datepicker (For .tsx)

Use:

import DatePicker, { registerLocale } from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

import vi from "date-fns/locale/vi"; // The locale you want: vi, en, cn, in,..etc .


registerLocale("vi", vi);

View all list code of all country here

          <DatePicker
            locale="vi" //add here
            selected={startDate}
            onChange={(date) => setStartDate(date)}
            selectsStart
            startDate={startDate}
            endDate={endDate}
            className="form-control"
          />

Result:

before:

enter image description here

after:

enter image description here

Upvotes: 0

ozgrozer
ozgrozer

Reputation: 2042

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} />

Upvotes: 33

Peter Andersson
Peter Andersson

Reputation: 124

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} />

Upvotes: 2

Arntor
Arntor

Reputation: 806

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"
  ...
/>

Upvotes: 6

Takman
Takman

Reputation: 1076

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.

Upvotes: 3

t.kuriyama
t.kuriyama

Reputation: 177

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

Upvotes: 6

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

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

Upvotes: 68

Related Questions