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
- Part 5: Start with the date picker
- Part 6: Add the sidebar
We’re going to make use of a 3rd part component to implement the date picker.
I searched “React calendar” and “React date picker” on Google, and I went on to analyze all the results.
The requirements for this date picker are quite a few.
In particular, it needs to support disabling dates, something that not every date picker does.
Eventually I settled on https://react-day-picker.js.org/ because it supports disabling dates, and it also has an extensive examples library.
From the terminal, in the main project folder, run npm install react-day-picker.
You can run this command in a separate terminal window, or in the same one if you prefer, by killing the npm run dev command hitting ctrl-C 2 times (then, remember to run npm run dev to start Next.js again).
This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
flaviocopes.com | Sciencx (2021-12-07T05:00:00+00:00) Airbnb clone, add react-day-picker. Retrieved from https://www.scien.cx/2021/12/07/airbnb-clone-add-react-day-picker/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.