This post is part of a new series where we build a clone of Airbnb with Next.js. See the first post here.
- Part 1: Let’s start by installing Next.js
- Part 2: Build the list of houses
- Part 3: Build the house detail view
- Part 4: CSS and navigation bar
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!