Forum Academy Marketplace Showcase Pricing Features

Select date range like in Airbnb - is it possible?

is it possible to allow users to select a date range?

@levon have you integrated this functionality in ?

What i’m trying to do, is to store a date range in a list of dates. For example all the dates between checkin and check out. Apparently it’s more complex then i thought.
But what if i could calculate the number of days between checking and checkout, convert checkin and checkout dates to text, and create an array of texts (dates) based on checking date and number of days?
For example
check in 1 sep 2016 - check out 5 sept 2016
nr of days = 4
Now, how could i create based on the nr of days , 1 sept 2016, 2 sept 2016, 3 sept 2016 and so on?

yes, we have implemented it. in the search results we simply show a repeating group where listings available dates fall within the selected filters. That means the available dates are greater than the “from” date and at the same time are less than “to” date.


Founder at Bubblewits - Bubble Certified Partner – a place to buy Bubble templates for landing pages, e-commerce, workflows, APIs etc. - one page Bubble demo - Collection of apps built on Bubble


so one listing can have multiple booking dates right? how do you store this dates? as date or you format it as number?
thank you

Yes, one listing can have multiple dates. It’s better to store them as dates not numbers

Hey Levon, I’m having a similar issue. So let’s say your database says the following (which represents existing reservations in the database for an existing property):

Reservation start date
9/3/2016 (Reservation 1)
9/12/2016 (Reservation 2)

Reservation end date
9/7/2016 (Reservation 1)
9/16/2016 (Reservation 2)

and let’s say I want to book the place for a trip from 9/13/2016-9/15/2016. Are you saying that the way you have implemented it you would be able to search multiple line items in your database to see if the 9/13/2016-9/15/2016 trip does not overlap with one of the existing reservations above (clearly it does, so if the application worked the way I wanted it would prevent me from booking for those dates)? The issue I have been having (as well as Cm1 probably has been having) is that you can only check the condition of whether your start date and end date does not fall within an existing reservation’s date range one at a time.

In that sense, let’s say now I wanted to book a trip from 9/2/2016 to 9/18/2016. Clearly my intended trip overlaps with the existing two reservations above, but the start date I picked is less than any start date in the above database, and the end date is greater than any of the end dates in the above database.

Cm1 and I have been stuck on this for a while, so we appreciate any help. Thanks!

But if you store as dates, you aren’t given the option to filter as greater than or less than, correct? this is where I’m getting stuck. I only see the ability to filter by “contains/does not contain” and “is/is not empty.” How did you get around this? @emmanuel – this feels like this should be a standard filter for date types. can we create this or can you point me in the direction of how to do it if I somehow missed it?

You want to work on lists I would have thought…

If you have a list of the dates that are to be booked, and a list of booked dates, and the count from …

… is zero, then it is free.

You can then do a search for all booking where the intersecting count > 0 … and if that count > 0 then you have a clash.

i.e. show me the count of all Bookings where the count of intersecting dates between the booking list and the requested date is greater than 0.

Yes, I should have clarified – I was talking about on a list. Your solution makes sense in theory! I hadn’t used the intersect function before. Let me give a try and report back. Thanks, Nigel!

Hey guys,

In addition to Nigel I think I have a solution as well. So if you have a hotel, each individual room is going to have a unique identifier that differentiates it from other rooms. This is not a perfect solution, but what you can do is put a listing of all dates in the future up until a certain amount of time in one column, and then in a column to the right you can put a column whose data type is a list of all of the unique identifiers that fall on that particular date. If you classify the unique identifier being listed for a specific date, then that would mean a reservation would be held on that date:

The key to having this work is being able to get the unique identifier into the database for every single date that falls in a certain range. The way you can do that is set up a workflow to make changes to a list of (whatever the data type is), and have the constraints for the search be that the date is greater than a check in input date’s value and less than a check out input date’s value. In order to get the dates that begin and end the reservation, you can put another two steps in the workflow to adjust only the check in input date’s value in the back end and the check out date’s:

Again, this is not a perfect solution, but I think it’s the best solution that we have right now until the bubble dev team implement’s date ranges functionality in the application. If anyone has any questions please feel free to let me know.

Also I know the above would imply you have to manually manage this database to make sure you dont run out of time in the future or it gets too big, but there’s probably some type of “do when condition is true” that allows the database to automatically to add a date in the future whenever you want.

@NigelG, the first challenge I see with this approach is how to create the list of booked dates from the booking experience. For example, you choose a start date to a booking and you choose an end date. How do you then add the dates in between to the list of booked dates?

Interesting hack. Re @NigelG’s approach, I can’t think of a way to reliably add the dates in between start and end date to the list of booked dates yet, so I’ll see if your approach works on my end. Have you successfully tested this or just thinking through it?

Feels like there should be a much simpler way to accomplish this task with core Bubble features – a booking engine seems like a pretty logical application for Bubble!

I populated a calendar of all dates (well, then next month or so), and did a search.

Mostly works…

1 Like

Thanks, Nigel. It’s hard for me to tell what you’re doing here from the outside – are you somehow enabling the dates in between the selected cells to be added to a list of some kind? if so, i’d like to know how you do that. i’m also assuming you manually input the “existing bookings on this dates” list, or pulled it from a single date input? My challenge is – how do you get that list to automatically update when a user inputs a date range? The only thing I can think to add are the start dates and end dates as inputs; can’t figure out the days in between. You could do start date + x day(s), but not sure of the logic to get the number of days right every time.

Sorry, should have posted the editor.

The date range would use the same logic, pull back a search on calendar for every “date” from from to to.

I just added it manually, but will look to see if I can extend. Good to buildout useful stuff :slight_smile:

1 Like

Thanks, Nigel. @levon would you mind sharing how you were able to add a list of dates when someone makes a reservation using a start and end date? Or did you set it up so that people have to select each night of the reservation that they want to stay (which you’d use to make changes to that current cell’s booking status)?

Hi Nigel

Just a quick question
I have managed to do what you just said but i m having a small issue when filtering rooms.
I have the following types:

  1. Rooms
  2. Reservation. Reservartion has booked dates

When customers makes a reservation, i save each reservation to a list of reservations for each room so i can access all the booking dates of a specific room.
Now, when i want users to be able to see only available rooms, i need to filter the results.
So what i want to do is this: If this rooms reservations booked_dates contains selected date range (Which is the range between checkin and checkout - like you said in the example above) hide that room

I use Advanced option but i get this:

Link to page:
Link to editor:
Thanks in advance