🕓 It's about time! - Pure Bubble

sudsy · 2020-12-17T14:12:37.636Z

Or more specifically, it’s about selecting time.

I was intrigued by the following posts…

Input for time only
Date and Time Picker, Just time?
Time Picker without Date

…and so, anticipating the need for a “time picker” myself, I set out to create one using only Bubble - i.e. no plug-ins, CSS, or JS hacks.

I actually had everything working using Bubble Dropdown elements but discovered rendering inconsistencies across devices and browsers. I then redesigned it using a single RG for choosing the time components (instead of multiple Dropdown elements). It now renders and operates consistently across all devices tested, including Android, iOS, and all major browsers (thanks to Bubble’s pixel-perfect layout engine).

I implemented it as a reusable element using just a few (8 to be exact) elements…

pure-bubble-time-picker858×524 16.7 KB

The features include:

24-hour and 12-hour modes
The lists of hours and minutes are generated dynamically “on the fly”.
Configurable minute “steps” (intervals).
Configurable foreground and background colors.
Does not use the DB or Options Sets and is dynamic and configurable.

It can be seen in action on the demo page below. The date picker is a regular Bubble Date/Time Picker element, but the time picker is my “custom” (reusable) element. Check it…

Pure Bubble Time Picker

Overall, I’m pretty pleased. I now have a “theme-able” time picker to use in my apps.

-Steve

boston85719 · 2020-12-17T14:31:16.605Z

How are you generating the list of hours and minutes dynamically?

J805 · 2020-12-17T15:37:34.196Z

Beautifully done. Bravo

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

One-on-One Tutoring
eLearning Hub
Video Tutorials
No-Code Classes

Christophe_HK · 2020-12-17T18:54:41.278Z

It’s really cool!

ben4 · 2020-12-17T19:18:50.811Z

I gave up and had to do this myself also. Are you willing to share how you did this?

sudsy · 2020-12-18T00:10:49.564Z

Jason and @Christophe_HK, thank you very much.

@boston85719 and @ben4, I plan to make the details available. Stay tuned.

BTW, while the approach is conceptually straightforward, it was more challenging to implement than I anticipated due to the logic required to support both 24-hour and 12-hour format as well as dealing with some Bubble formatting deficiencies.

For instance, to get leading zeros, I divided the number by 100, formatted to 2 decimal places and then simply grabbed the last 2 characters…

leading-zero

If more leading zeros are needed, just divide by larger power of 10. It’s a handy technique, but it would be unnecessary with better formatting options in Bubble.

J805 · 2020-12-18T16:24:00.077Z

Nice workaround to view the leading zeros. I will definitely bookmark this just in case I will need to do this sort of thing!

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

One-on-One Tutoring
eLearning Hub
Video Tutorials
No-Code Classes

BrianHenderson · 2020-12-18T19:36:28.855Z

I LOVE this implementation. Buttery smooth on mobile, too!

I despise the default drop down menu for selecting time in Bubble. I will be studying this post intensely in the near future to imitate it because the way you designed this time picker solves some major user interface issues I’ve been dealing with in my app. Thank you so much for the inspiration!

gf_wolfer · 2020-12-19T21:33:58.770Z

I’m actually working on an app that uses time and scheduling and this motivated me to make something without a plugin. Haven’t worked it into a reusable element and 24 hour clock yet, but it’s going pretty smooth

223e1f35d8a142560dea0cd749c0583b

ben4 · 2021-01-09T03:58:04.759Z

@sudsy Hey Steve, Just curious, how are you with helping us get to your cool ass time picker?