How to use React Datepicker

Tomoharu Tsutsumi
1 min readJul 5, 2020

I had a chance to use React Datepicker(https://reactdatepicker.com/). This is so cool and I think that I’m expecting to have many opportunities to use this, so I’m going to summarize it.

install

npm install react-datepicker --save

or

yarn add react-datepicker

import css for React Datepicker

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

You can use this library as you like.

If you want to change the locales…

you have to install library, date-fns( https://date-fns.org/).

Moreover, the version must be more than 2.0.0, because you can’t use translator for React Datepicker.

and…

import DatePicker, { registerLocale } from 'react-datepicker';import ja from 'date-fns/locale/ja';registerLocale('ja', ja);

like this.

I’m a Japanese, so ‘ja’ is used. Supported languages are here => (https://date-fns.org/v1.9.0/docs/I18n#supported-languages)

<DatePicker
locale="ja"
/>

You can change the language by this.

Started LinkedIn as well!

https://www.linkedin.com/in/tomoharu-tsutsumi-56051a126/

--

--

Tomoharu Tsutsumi

Senior Software Engineer at two industry-leading startups ( Go | Ruby | TypeScript | JavaScript | Gin | Echo | Rails | React | Redux | Next)