Airbnb clone, start with the date 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’ll now start to add a date picker to the single house page.

On Airbnb on a single house page you can see a date picker.

You need to enter the dates to display the prices:

here is what happens when you click the “Check-in” box, a date picker appears:

I want to add something similar to our Airbnb clone.

We’ll start simple.

What I want to do is to show a similar view, just for the dates, with a start and end date.

We’ll display a date picker when we click the check-in and check-out inputs, and we’ll let the person choose 2 dates.

With some rules:

  • the start date can’t be in the past
  • the end date can’t be today
  • the end date can’t be before the start date
  • when we change the start date, the end date will point to the day after it, unless the end date is still a valid one (e.g. it’s still after the start date)

We’ll use a pre-built date picker, and we’ll build all our logic around that.

Next part: Add the sidebar

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

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