[New Plugin] Date,Time,Range & Zone Picker

Hello bubblers,

Introducing a new plugin - Date, Time, Range & Zone picker - that has just been added to the Bubble Developer Kit. Now easily build great timezone-aware global marketplaces like Airbnb or those awesome booking sites.

  • Choose from Single, Multiple or Range formats.
  • Enable Time Selection in addition to date in every mode
  • Set the picker TimeZone. Yes, it’s really as simple as that :smiley: Each picker ‘understands’ that the user will select the dates / time in the timezone specified in the element. Everything is managed behind the scenes.
  • Disable specific days of week: Days are represented as 0-6. So to disable Saturdays & Sundays set this to 0,6
  • Disable a list of dates. These also work in conjunction with disable days
  • Set minimum, maximum dates, hours, minutes and seconds
  • Set initial content for each format
  • Optionally force an output time hour, minute and second
  • Displayed value formatting: Customize the display formatting in each format
  • Set & clear dates using element action workflow steps

Priced the same as other bdk plugins i.e. $4/mo or $16 one-time.

Link to Demo page
Link to Demo page editor
Link to Plugin documentation

Single Format

Multiple Format

Range Format

Happy Bubbling!

Cheers,
Gaurav
theBDK.com

12 Likes

Hi @gaurav,

I just bought your plugin. Unfortunately, no date can be selected. It looks like it does not work if the Input is in a popup. Please have a look at that issue and let me know.

Thank you.

Cheers,
Oliver

1 Like

Hi @oz1,
Thanks for purchasing the plugin! :smiley:

Good catch! Turns out it was working but the picker was actually appearing behind the popup. I’ve updated the plugin fixing this. and also added a demo showing its use within the popup.

Please update the plugin and try now (you may need to clear cache once after updating).

Cheers,
Gaurav

Some video recordings while I was building the demo page:

Single format

Multiple format

Range format

Thank you @gaurav, it works now like a charm.

Cheers,
Oliver

1 Like

New Feature Added - option to show only timepicker

@laurence you’ll be able to select time-only with the optional constraints of min, max hour & minutes, increments of each, as well as pre-defined date.

Like the other modes in this plugin, the time-only option is also timezone-aware i.e. if you defined timezone as ‘America/Los_angeles’ in the element property editor, the time selected will be output for that timezone. This can also be dynamically changed

1 Like

Thanks. I’ll check it out next week.

1 Like

Currently encountering a critical issue involving leap days with when using this plugin in range mode. The plugin doesn’t return february 29th in the selected days, and instead always returns february 28 in its place. For example the range: 23 Feb 2020 - 1 Mar 2020 returns:
Feb 23rd, 2020, 12:00 am
Feb 24th, 2020, 12:00 am
Feb 25th, 2020, 12:00 am
Feb 26th, 2020, 12:00 am
Feb 27th, 2020, 12:00 am
Feb 28th, 2020, 12:00 am
Feb 28th, 2020, 12:00 am
Mar 1st, 2020, 12:00 am

Hi @jjj230
Thanks for reporting the bug. I will take a look and fix it asap

2 Likes

Thanks for the quick response @gaurav! Any idea when the fix for this might land?

@jjj230 currently working on it. Tentatively in the next 24 hours

2 Likes

@jjj230 This is fixed. Please update the plugin version in your app. Thanks for the bug report :slight_smile:

Cheers,
Gaurav

2 Likes

@gaurav Thank you for fixing the bug! I really love the plugin and find it incredibly useful. :raised_hands:

Unfortunately, I’ve encountered another issue with the plugin where it doesn’t output dates correctly around the start of daylight savings time.

See the screenshot:

For clarity my system timezone is also America/New_York

@gaurav Again, I’d like to bring this issue your attention, as my users have begun encountering the issue I mentioned above over a month ago but never received a response for.

The plugin simply does not work on the first day after daylight savings time begins and returns the incorrect date.

Here’s a screenshot demonstrating the issue:

The date selected is the 9th of march at 12:00 am. Yet the output is march 8, 11pm.
This is incorrect behavior and doesn’t match how the plugin behaves on on every other day of the year.

This bug literally makes it impossible for someone to select the 9th of march as a date.

Will this be fixed? Or should I work on removing this plugin from my apps?

Thank you.

Hi @jjj230,

I did look at the issue and it appears this is an open issue in the core library itself. Specifically the date output is off in the +/- 12 hours duration when the daylight saving time changes in the US on March 9, 2020. It is a result of circular loop b/w time & offset as one is needed to calculate the other.

I’ve DM’ed you the link to the issue if you’d like to take a look. I’m watching if the dev’s come up with a solution but unfortunately I think my hands are tied until that library issue is resolved. A suggestion would be to have a manual confirmation popup if you have the element output a date b/w Mar 8th noon to Mar 10th noon.

Best,
Gaurav

Ok thank you for the response, and I appreciate you sharing the link to the issue on github.

I thought maybe if I changed the output time to something other than midnight I might be able to work around this issueScreen Shot 2020-02-25 at 7.49.31 PM

However, I’ve noticed that no matter what I put in the output time settings, the plugin always returns a date at midnight. Is this something you’ll be able to fix?

Hi @gaurav,

When using the reset data function in a popup, data in Date,Time,Range & Zone Picker are not considered. Can you take a look at this, please?

Cheers,
Oliver

Hi @oz1,
Yeah that’s correct. It doesn’t support the bubble’s reset action as of now.
I’ll look into adding it in the next update. :slight_smile:

Cheers,
Gaurav

Hi @gaurav,

I’ve purchased this plugin and I’m trying to set the date picker to only allow selections from a list of dates.

Is this possible?

i.e. User A will select multiple dates using your plugin, and then User B can select one of those dates on the other side of the marketplace.

Right now I can set the minimum + maximum dates, but can’t set the date picker to a list of selectable dates.

If setting the actual selectable dates isn’t possible, do you know how to save the ‘not selected’ dates in between the minimum + maximum (start date, end date) so that I can disable those specific dates for User B?

@gaurav why isn’t the initial content working properly in this plugin?

Here’s what should be on the page:

image

But nothing is showing in the picker:

image

Additionally, we have set min’s and max’es for the picker, as indicated below, but they’re not working or selectable inside of the picker!

image