In this module we’re going 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.
We’ll start simple, in this module 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.
Let’s start!