I have an Airbnb style app and I am wondering if there is any way that the date and time picker can show “unavailable dates” when a listing is rented by a guest.
For example, if this listing below had been booked for the dates May 23 & 24th I am wondering if it is possible for the date and time picker to display the given dates as unavailable.
No, the standard date picker doesn’t work like that.
You have to build your own, which was pretty difficult until the date range functions came along. I think I have an example built, will dig it out.
Ok thank you very much Nigel!
yer sorry mate, i thought you were looking to find a way to show the dates as unavailable, i didn’t realize you meant actually blanking the calendar’s tiles out.
Thanks for the help anyway @jarrad
@NigelG were you able to dig up your example yet?
Thanks everyone!!
Yes, found it !
It isn’t very pretty, but it works (I think).
The admin page is here…
There is quite a lot going on. The top part is showing how you can display “free” dates. It is complicated by the fact that you can’t say “show me all the things that DON’T overlap” so I have a Repeating Group of things that DO overlap and then the “Free” Repeating Group filters on that list. So you are creating a list of booked rooms, and then having a list of rooms that are NOT in the that list.
The bottom part shows how you can create something like the date picker you are after. It lists out dates (you need to have a pre populated data type with dates I am afraid) and colours them if there is a booking on that date.
Hopefully the data structure makes sense, your have ROOM and that has a list of BOOKINGS. BOOKING has a Date Range. And you use that date range and OVERLAPS (for from/to) and CONTAINS (for single date) to check the dates.
Have a look and see if it makes sense.
Hi Nigel,
Thanks for your help! when I click on either of those links it takes me to my home page. I’m not really sure what the issue is but would you mind sharing the link again?
Thanks so much!
https://bubble.io/page?type=page&name=roomchoose2&id=trest4
Just circling back to this thread as I recently found another solution for the core problem.
Massive shoutout to @eve for the assistance on this one!
I was building an Airbnb-esque product and wanted to display a list of available properties on a search results page, but obviously also exclude any properties from displaying if they’ve already been booked over a users desired dates.
On my home page, I have two date/time pickers that I’m using to send through as custom paramters to my search results page.
On my search results page, I then needed to set a custom state to my repeating group, storing the dates from my page parameters as a range.
Next, you’ll need to set the state of this repeating group when the search results page is loaded. I’ll be setting the date range as the two dates sent through my parameters.
Next, I’ll add my usual constraints to my repeating group - filtering out a list of properties where the fields equal the values of my additional page parameters (excluding my dates).
Now, I’ll need to add an additional filter to the list of properties that are displaying in my repeating group. Using an advanced constraint, I can filter out properties where the booked-dates (a date range I’m storing in my database each time a trip is booked) overlaps with the dates set in my repeating groups state.
I’ll then add a binary formatted as text, and choose when the text is ‘no’.
Now, this WON’T display any properties that have booked dates overlapping with the users query dates.
Hope this helps!
