Forum Academy Marketplace Showcase Pricing Features

🗓 [FREE Plugin] Air Date/Time Picker

@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

@seanhoots I’ve got the latest version 3.1.1 installed, but I’m still noticing that the “clear picker” function is buggy. It clears the visual calendar, but does not clear the element’s value. Adding a button and attempting through an event action gives the same result. An action to reset the picker generates the following error: “The plugin Air Date/Time Picker / action reset a Air Date/Time Picker threw the following error: Cannot read property ‘length’ of undefined”

Love this plugin otherwise, and thank you so much for creating it for the Bubble community!

1 Like

bro how can i save the date, month and year as in separate data field in the database using air date time piker.?

I’m running into the same issue – did you find a workaround by chance?

@seanhoots Is there a trick to getting the picker’s “value list” to populate? It gives the appearance of allowing me to select multiple dates, both in the dropdown/list view and the inline view, but I cannot fetch the selected dates themselves and the inspector always shows the value list is empty. See screenshot:

Hopefully just user error. Any ideas?


I just tested the plugin on the latest version and the value list works as expected for the popup/dropdown.
When using inline there are some issues with multiple dates and I made a note about this in the element properties as shown below

The reason for the limitaton for the inline issue is that unlike the popup mode where I can detect the popup is closed and trigger value changed and publish the values, it’s impossible to know when a user has finished their selection when using the inline mode.
And I can’t publish the value on every change for performance reasons. Imagine that I was making publishing the values on every selection and a user was using the sliders for the timer, then as the user is dragging the element will be publishing several value change events and new values. So if you had a workflow to be triggered when a value changes, this workflow will be called several times as the user is dragging the time slider.
Its for this reason i disabled multiple values for the inline mode for now. There are ways to address this but will take a lot of time and effort which i don’t have now.

So simple answer is if you want to use multiple dates don’t use the inline mode.

You can use date range though for inline mode because with a range it requires selection of two dates so it’s possible to know when the selection is done to trigger the change event and publish the values.

1 Like

Thank you, that helps explain—I completely missed the note about multiples/inline. Still, I cannot get the value list to populate even when using dropdown instead of inline. In this screenshot, you can see I have made multiple selections (shown comma-separated where the picker dropdown would be) but in the inspector you can see that the value list is still empty.

It seems that no matter what I do, the value list is always empty.

I may just switch to ranges to keep it simple, though I think multiple values suits my need better. Either way … I do appreciate this plugin. Thanks!

What Happened?

Without warning, Air Date/Time Picker appears to be broken. What should be a date/time picker now looks like an input element.


This is serious! I just pushed some important changes live that have nothing to do with date/time picking but the date/time picker is out of commission everywhere I look.



Same issue Here!

The plugin Air Date/Time Picker / element Air Date/Time Picker threw the following error: [email protected]:// line 15 > Function:10:323 n/r.initialize/</</</<@ [email protected]:// (please report this to the plugin author)

1 Like

I have a plugin I built myself. It just broke too, and is throwing errors in the console. So it’s probably something with Bubble.

1 Like

I don’t know how to read that, but I know this is a serious problem for me and users.

We need a quick fix or . . .

I may need to roll back. But is it affecting live sites that didn’t push a recent update?

1 Like