This article includes:
- One section for Bubble beginners
- One section for more experienced Bubble makers
- One cool app built with Bubble
- One tweet related to Bubble that I found inspiring and helpful.
Feel free to skip to the section you think you’ll enjoy the most!
The Beginners Bubble
Almost all app interfaces include dates in one way or another. No matter what you’re building, you’ll need to deal with them.
Today’s Beginners Bubble covers:
- How to get dates & times from users
- How to store them in the database
- How to display them in different formats.
How to get dates & times from users
I use the basic Date/Time Picker from Bubble. It’s simple but it works well.
For my first apps, I tried using a more fancy selector, the AirDate Time picker plugin. It lets you block certain days (e.g. weekends) and allows your users to select multiple dates at the same time.
However, I have run into a few bugs and the developer who created the plugin is no longer reachable, which makes the plugin unusable in practice. This topic in the forum has 40 pages of people asking questions about it and you can see everyone’s frustration.
Therefore, I would recommend sticking to the simplest solution, the Date/Time Picker element.
Question for you, reader: Do you have a good plugin to work with dates that you would recommend?
How dates & times are stored in the database
It doesn’t matter if you need to store a date, date&time or just a time, the data field in your database will be of type date. That is because, in reality, there is no such thing as a date without a time component. Dates describe a unique point in time and they need to include times so that we can manipulate them.
Depending on how you need to show your date, you will make the necessary changes to the data with the built-in function formatted as from Bubble.
Imagine we had an Event with a Date field:
You could format the date in many different ways, as you can see. You don’t need to create new fields in your data type, you just need to format that one field to suit your needs.
The Makers Bubble
Building up on the Beginners bubble, this week I’m sharing how to display your user’s time zone. Although it’s not included among the custom formats that Bubble gives you, typing ‘Z’ will do the trick.
You can use this to reassure your users that the times they’re working with are the correct ones. Example ⬇
This might also be useful if you want to show a date in different time zones at the same time. For example, imagine an event starting at 9 pm in Spain that you want to live stream in many different countries.
To do this, you would create a few texts showing the hour in different timezones and change the Time zone selection to Static in each one, selecting the correct ID for each case. Example ⬇
If you want to know more about what’s going on under the hood when you’re constructing dates on Bubble, this video by Keith Crosley is the video to watch.
Bubble App of the Week
This week I want to showcase Cuure, an app that is fully built on Bubble and has raised a €1.8m from top investors in Europe.
When you log in, you get a detailed survey where they ask you about your habits and health goals.
The survey is a great example of how to interact with users and then work with that data to make different actions. After you complete the survey, they offer you supplements based on the results.
The page has also some simple e-commerce functionality such as the possibility of applying discounts to the price and reviewing your shopping cart.
I filled the survey and apparently I could use some Guarana, Omega 3 and Bacopa. Not planning on taking anything soon apart from some holidays… but it’s interesting to know.
Bubble Tweet of the Week
This week’s tweet is by Joe Brown, a really talented Bubble maker. He shows how to add gradient text in Bubble, using a bit of CSS to make it happen.
I hope you enjoyed reading this article as much as I enjoyed sharing what I’m learning. If you have ideas for things you would like to see covered in the next articles, don’t hesitate to hit me up on Twitter!