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


Go to the next lesson