React DatePicker
React DatePicker is a wonderful reusable DatePicker component that has many customizable inbuilt methods and can even be displayed as a calendar as opposed to an input field that displays a calendar once clicked.
I was recently working on a booking app that needed a calendar, one that in some instances could be fully displayed and other instances could be hidden to a single input field. Whilst I googled for a React Calendar I came across a couple that gave you exactly what you needed but to someone like me, a relative new comer to the world of React, I didn’t know how to implement all the potential of these calendars. Here I was with only two weeks to design my project and I needed to spend time figuring out which methods would work and how. Most of the calendar websites would give you starter code, but for no lack of trying I couldn’t find many examples of how to implement them fully. Youtube gave me old videos or extensively 3 to 4 hour videos of people building full websites. Trying to find the calendar part of the video was like searching for that tiny bolt you’ve just dropped in the grass because you thought building the new BBQ on the lawn would be easier…
I chanced upon React DatePicker. It ticked so many boxes for someone still learning the React ways. But I needed one vital thing…. I needed it to be constantly displayed as a calendar not just a popup calendar when clicked on.
So let’s begin.
Firstly, we need to install the necessary files.
Make sure you add import DatePicker from react-datepicker; and import react-datepicker/dist/react-datepicker.css; to the top of any Component you will be using this in. This will style a basic calendar component.
Next let’s set up a basic Component that will hold state for us. I have put some very basic CSS on the div just to render it to the middle of my page for viewing purposes.
This renders a very simple, but stylish popup calendar.
- Perfect! A simple, calendar with the ability to scroll through the months using the arrow keys. Exactly what I was after. But… I was using a specific booking system whereby people could set their availability showing only the days they were available on their calendar. This is where a new website came in super handy, giving me examples of many of the methods available to this React Component.
This website provided up to date methods using hooks! Unfortunately I hadn’t learnt hooks so I did need to convert them back to be able to be used in a class function. But the list of examples is endless.
I needed to be able to render all dates as unavailable and add an array of available dates into my component’s state that could then be rendered to the calendar. Simple, there was a method that included only the dates passed into the calendar and the rest were unavailable.
So first, I needed to set these dates. For the sake of showing, I have just added a small array of dates to state.
Here, I have added an array of dates as strings. I have then created a method that maps through the state and uses the inbuilt new Date() method to convert each date to the necessary format for the calendar.
Within <DatePicker/> I have added one of the inbuilt React DatePicker methods called includeDates. I have then attached the method that will pass the three dates into the Component.
The end result:
The dropdown now only displays the dates in held within the state. But! I didn’t want to have to click on the input area to display the calendar. I wanted a calendar constantly displaying. Well. The link above had a simple answer fir me.
Within the <DatePicker/> component where I included the includeDates method. I simply needed to add “inline”. That was it.
I now had a calendar being displayed.
I highly recommend people play around with this Component. It seems like it has so much to offer with such little code. If you have any pointers or tips, or maybe a better calendar that has plenty of method examples online for someone relatively new to the React world then I would love to know about them!
