How to implement a DatePicker in React.js

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 :
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.

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.