Forum Academy Marketplace Showcase Pricing Features

🗓 [FREE Plugin] Air Date/Time Picker

No haven’t yet.

Hi @seanhoots! Thanks for such a great plugin! Wanted to ask if you’re considering to have an option to only allow to select dates you can specify beforehand, e.g. using as a source of data the starting time of a list of events. In that case, if the data source has 10 events that take place on days 1, 2 and 3 of July, only those 3 days are clickable/selectable. This would be heaven for me and anybody looking for a booking calendar where we don’t want users to be clicking on all the dates until they find the ones on which there are events available :slight_smile: What do you think? Thanks and congrats!

@eurogar, while this can be done it will require a lot of work so I don’t currently plan adding such a feature unless you or someone is willing to sponsor it.
Alternatively you’re free to fork your own version of the plugin and add such a feature.

1 Like

My plugin Calendar Grid Pro specifically addresses this use case and, IMHO, does so rather awesomely. See:

1 Like

Hi I can’t seem to be able to block date ranges on air datetime.

I have two types of data: Listings and Booking requests.

Inside The listings there is a field of booked confirmations set as a list of date ranges. I still can’t figure out how to block this list of date ranges from air date picker.


Hi @paulogustavopeixoto,
Blocking of list ranges is currently not supported. You can only block a list of dates or a single range.

You can take a look at @keith’s Calendar Grid Pro plugin. I think it supports blocking of list of date ranges.

Thanks @seanhoots
That makes sense now, Do you know if there is anyway I can save all the days between start and end in data base? and what type od data it would be?

without it being a range but instead a list of dates. @seanhoots

Not natively in bubble. You will have to do it through JavaScript with the toolbox plugin.

Thanks for the reply @seanhoots Anyplace or it shows how to do it?

@seanhoots, thanks for the shout-out. @paulogustavopeixoto, my Calendar Grid Pro plugin addresses your exact use case. You’ve probably noticed that date range picking in the context of rental bookings is a very specialized (and complex) thing – CG Pro does exactly this.

And, yes, one of the core functions of CG Pro is to take a list of ranges (or similarly lists of paired start and end dates that represent ranges)… AND/OR a list of single dates and show them as blocked… and do all the right things in terms of unblocking them during range picking, informing of impossible choices, allowing dynamic nightly lengths-of-stay, etc. (The amount of effort, knowledge and code [visual or text-based] it takes to do this would blow your mind.)

Note, @paulogustavopeixoto : You CAN (with a great deal of difficulty) do all of this vanilla Bubble, but it is exceedingly tedious and hard to build… and the end result performs only-just-barely-acceptably.

As for your question about how to save all the days between some start and end in the database, you have two options: Just represent that as the start and end (either in an object with a start and end date) or as a date range data type (which is essentially a 2-element array that represents the start and end of the range).

There’s a third option (which you ask about), which is to create a list of individual dates based on the start and end points of the range. This LITERALLY CANNOT be done in vanilla Bubble (and cannot be done - properly - in JavaScript without the assistance of a library, if you want to take into account various date-related oddities). Moment.js and its related libraries (especially moment-timezone and moment-range are my pick for this type of thing – and they have their own idiosyncrasies that you must come to terms with). A tip: The moment-range extension to moment has a feature that allows you to decompose a range “by [time interval]” which returns an array of such intervals that compose the range. This is a great way to turn two dates into the individual days that are encompassed by that range.

(However, you either need to code this yourself, pay someone, or wait for someone to do it for you. It’s not super-hard, but it takes some time to become acquainted with the issues involved. I have a ton of different versions of that coded up, but it’s only available at the moment as part of CG Pro. An SSA and/or client-side element version of that type of function is something I intend to publish at some point, but there are several other more important things I’ve got going at the moment.)

I say all the above not to dissuade you from pursuing a listing/booking type app in Bubble – I built one and learned an AWFUL lot in the process. If you want to learn about dates and times and picking them, you can advance your knowledge very rapidly by reading everything I’ve ever written about “date/time” here in the forums.

BUT, when I was embarking on that project, nobody had built CG Pro. If I had run across such a thing, I’d have been like, “TAKE MY MONEY!!!”

(Also, all of the above explains – in brief – a bit about why “date pickers” are not even close to the solution to the problem you have and why even a very excellent date picker like @seanhoots’s Air Date/Time Picker cannot easily be modified to accommodate the use cases you seek. You kind of have to build a thing with that use case in mind.

The converse is NOT true, however: CG Pro makes an excellent date picker… albeit a premium one with a bunch of extra features that one doesn’t need it one only seeks to ask he user her date-of-birth.)

thank you @keith I will have a look

Has anyone seen issues with auto binding to parent element. It seems that it works, but it does more than one at a time.

Hello @seanhoots I was thinking about the issues of being only able to block a single range. Is it possibly, technically, to block multiple single ranges, Say instead of having only on date field being a list of ranges, having say 12 date fields representing individually a range, and each being blocked. For example in my app the min booking requirement is 30 days so if I create 12 fields in theory it is possible to block each individually right? or am I missing something?

Is it possible @seanhoots ???

Why don’t you just use the Calendar Grid Pro plugin?

I have seen that plugin indeed. But since I am on a budget, really tight one I want to know until which point I can go without having to pay for any plugin.

Ahh I see. The problem however, is that the plugin creator has a few other plugins (all of which are free except one) and so maintaining and adding to them is difficult especially when they are free. There is literally no incentive for the creator to add your required features, so what I’d advise you to do is either sponsor this feature or use an alternative (i.e. Calendar Grid Pro).

1 Like

As I explained you can block only a list of dates.
So if you have a list of ranges, you will have to use some JavaScript with the toolbox plugin to convert the list of ranges to a list of dates and pass that to the plugin.
If you google how to convert a date range to a list in Javascript you will get some solutions.

1 Like

@seanhoots someone asked this question and not sure I was able to find the answer for it. Can you set the time picker to be a dropdown instead of the two sliders? It would help people with “big fingers” select time easily. Thanks

1 Like