How to implement a DatePicker in React.js

Prateek Gogia
codeburst
Published in
2 min readMay 18, 2018
https://www.behance.net/gallery/45302449/360-365-days-2017-Calendar

In this article, I’ll be sharing my experience about How did I implement a DatePicker in React.js.

Some Backstory..

I was and still am very new to React environment and much more confident in working with Angular Applications (because Hey! Typescript). But this is not one of those articles where I am going to judge any framework/library. Every framework has it’s own pros and cons.

I was using reactstrap to decorate the application with bootstrap and surprisingly, there is no datepicker available in the forms. So, I searched, researched and consulted many people and I found one gem, react-dates. There are many other packages available but I somehow was not that much impressed by the design or the performance of them but they might be useful for you!

Some of them are :

  1. react-dates

2. react-datepicker

3. react-date-picker

4. react-day-picker

So, I’ll be telling about react-dates package by AirbnbEng in this article.

What is react-dates?

An easily internationalizable, accessible, mobile-friendly datepicker library for the web, yes that’s what their GitHub page says. It’s very easy to use and integrate in your projects.

https://raw.githubusercontent.com/airbnb/react-dates/master/react-dates-demo.gif

Just look at the above demo, it’s a beautiful work done by AirbnbEng.

Integrating the DatePicker in our application

Need to do some installations to make our application neat and tidy, I’ll be installing bootstrap, reactstrap, react-dates.

npm install --save reactstrap bootstrap react-dates

I am sharing the gist for the three files that I used, App.js, icon.js, icons.js.

I have used <SingleDatePicker /> Component from react-dates package, it has various other options available as well which can be found on it’s GitHub’s repository’s page, but I won’t be covering those topics because my aim is to just share about how to use a DatePicker in existing React Application.

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Responses (2)

What are your thoughts?

Thanks for writing this about DatePickers! There can be much depth to such a seemingly simple component and in my conversations with devs this often comes up as a tricky component to find. I’d like to contribute one more DatePicker to your list…

--

Great article. One thing I must point out that storing svg as string in icon.js file for a react project is not advisable unless you are implementing code splitting with your app. It will make your entry point heavy and the browser would take load…

--