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 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.
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.
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).
@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
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
@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.
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?
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.
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 issue
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?
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?
Each picker ‘understands’ that the user will select the dates / time in the timezone specified in the element. Everything is managed behind the scenes.
