This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
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.
We’ll start tomorrow!
This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
flaviocopes.com | Sciencx (2021-12-05T05:00:00+00:00) Airbnb clone, start with the date picker. Retrieved from https://www.scien.cx/2021/12/05/airbnb-clone-start-with-the-date-picker/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.