Airbnb clone, start with the date picker

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 …


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.

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


Print Share Comment Cite Upload Translate Updates
APA

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/

MLA
" » Airbnb clone, start with the date picker." flaviocopes.com | Sciencx - Sunday December 5, 2021, https://www.scien.cx/2021/12/05/airbnb-clone-start-with-the-date-picker/
HARVARD
flaviocopes.com | Sciencx Sunday December 5, 2021 » Airbnb clone, start with the date picker., viewed ,<https://www.scien.cx/2021/12/05/airbnb-clone-start-with-the-date-picker/>
VANCOUVER
flaviocopes.com | Sciencx - » Airbnb clone, start with the date picker. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/05/airbnb-clone-start-with-the-date-picker/
CHICAGO
" » Airbnb clone, start with the date picker." flaviocopes.com | Sciencx - Accessed . https://www.scien.cx/2021/12/05/airbnb-clone-start-with-the-date-picker/
IEEE
" » Airbnb clone, start with the date picker." flaviocopes.com | Sciencx [Online]. Available: https://www.scien.cx/2021/12/05/airbnb-clone-start-with-the-date-picker/. [Accessed: ]
rf:citation
» Airbnb clone, start with the date picker | flaviocopes.com | Sciencx | 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.

You must be logged in to translate posts. Please log in or register.