In this episode, we focus on making our date picker a bit smarter by automatically selecting the first available date that actually has open slots. We start by using some existing logic in our code to find that first available date, and then pass it from our backend through to the frontend as a prop.
You'll see how we briefly tweak our checkout code so that the date picker is pre-populated with this first available slot—meaning users won't have to hunt for it themselves. We also demo what happens if there aren't any slots for today: our picker will jump straight to the next available date.
Finally, we test this out by playing with the schedule exclusions in the database and watching how the picker responds. In the next episode, things get a bit trickier as we start building out navigation to move between dates and dynamically load more slots.