šŸ•“ It's about time! - Pure Bubble

Showcase
1

Or more specifically, itā€™s about selecting time. :wink:

I was intrigued by the following postsā€¦

ā€¦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-picker
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ā€¦

Overall, Iā€™m pretty pleased. I now have a ā€œtheme-ableā€ time picker to use in my apps.

:slightly_smiling_face:

-Steve

18 Likes
2

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

3

Beautifully done. Bravo :clap:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes
2 Likes
4

Itā€™s really cool!

1 Like
5

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

6

Jason and @Christophe_HK, thank you very much. :slightly_smiling_face:

@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.

4 Likes
7

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

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

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

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!

1 Like
9

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

2 Likes
10

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