As mentioned in the introduction of this module, we’re going to make use of a 3rd part component to implement the date picker.
I searched “React calendar” and “React date picker” on Google, and I went on to analyze all the results.
The requirements for this date picker are quite a few.
In particular, it needs to support disabling dates, something that not every date picker does.
Eventually I settled on https://react-day-picker.js.org/ because it supports disabling dates, and it also has an extensive examples library.
From the terminal, in the main project folder, run npm install react-day-picker
.
You can run this command in a separate terminal window, or in the same one if you prefer, by killing the npm run dev
command hitting ctrl-C 2 times (then, remember to run npm run dev
to start Next.js again).
The code for this lesson is available at https://github.com/flaviocopes/airbnb-clone-react-nextjs-2020/tree/3-3