Additional Listing DatePicker Changes
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.
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.