How to use React Datepicker

Tomoharu Tsutsumi
1 min readJul 5, 2020


I had a chance to use React Datepicker( 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.


npm install react-datepicker --save


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(

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


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 => (


You can change the language by this.

Started LinkedIn as well!



Tomoharu Tsutsumi

Software Engineer with 4 + years of professional experience.