This video is available to students only

How to Optimize a React Date Picker

We'll discuss a few small changes that can be made to optimize the date pickers for when a user is to book a certain listing.

Additional Listing DatePicker Changes#

📝 This module's quiz can be found - here.
🗒️ Solutions for this module's quiz can be found - here.

The createBooking mutation is the mutation that is triggered when a user provides payment information and confirms the booking of a listing between certain dates. We have a check be made to confirm the check-out date a user selects is not before the check-in date the user has selected.

We can add an additional check to confirm the user is to never select booking dates that exceed some point in the future. As an example, we can say a user isn't allowed to select dates that are 90 or more days in the future. We can make the server-side validation for this in the createBooking() resolver function by comparing the difference between today's date and the check-in/check-out dates in milliseconds.

millisecondsPerDay is a constant we can have in the file that represents the number of milliseconds in a day.

On the client, we can update the UI of the datepicker elements to have the dates more than 90 days from today be disabled. We can do this in the disabledDate() function within the <ListingCreateBooking /> component that is used in the disabledDate prop of the Ant Design <DatePicker /> elements.

Start a new discussion. All notification go to the author.