Airbnb clone, add react-day-picker

Join the 2022 Full-Stack Web Dev Bootcamp!


This post is part of a new series where we build a clone of Airbnb with Next.js. See the first post here.

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

Next part: Add the calendar to the page

Want to become a better Web Developer? Join the 2022 Web Development Bootcamp!

⭐️⭐️⭐️ Join the 2022 Web Development Bootcamp ⭐️⭐️⭐️