Dynamic date range picker

Need help Plugins
1

I need a Bubble.io plugin that has the following attributes.

  1. It must be a date picker.
  2. It must support date ranges.
  3. It must allow me to pick a range of dates on a single calendar UI (as opposed to Bubble’s built in date picker, which forces a user to select a start date and an end date on separate calendars.)
  4. It must allow me to change the date range via a workflow, not necessarily just clicking on the design element.
  5. It must allow me to set relative ranges — both relative to today (last 7 days, last 365 days, etc.), as well as relative to the most recent time range (last quarter, last week, last month, etc.).

I’ve tried both Bubble’s built-in date picker (doesn’t meet criteria #3) as well as @ZeroqodeTeam 's Air Date/Time Picker (which gets close and has lovely date range selection UI, but ultimately falls short on #4 and the second half of #5).

Has anyone found a plugin that supports these criteria?

2

For this specific use case I would suggest designing a little reusable element to manage this, I have had to do something similar for an app and I didn’t find anything flexible enough personally.

3

Thanks for the input, @Oliver-wholegraintech . If you’re willing to share your build, I’d love to have an idea of how to manage the UI of a calendar here.

1 Like
4

Yep sure thing, as my base I used the excellent plugin - TopCal Schedule Calendar Time Slots Plugin | Bubble

And modelled my date picker off one of their examples.
image

Here is a screengrab of one use of it I’ve had.

The great thing is each element is just a group, so you can kick off whatever WF you want and reference the parent groups date.

IMO this is the most flexible way to implement it.

5

Doesn’t look like it supports date ranges, I’m afraid @Oliver-wholegraintech

6

I just meant that plugin was where I got the idea and approach, I’m not actually using much of the core elements aside from the list of dates which I could move away from but im not actively working on that project atm.

Once you have a calendar interface with a list of dates in each cell, you can essentially do whatever you want through workflows & conditionals etc.

If you’re wanting a date range then just allow the user to only click on two cells and span the cells between to indicate the range, then use those values as upper and lower etc, does that make sense?

1 Like