#8 Bubble Makers: Working with dates ⏳

361 people receive today this email. As usual, it includes:

1. One section for Bubble beginners

2. One section for more experienced Bubble makers

3. One cool app built with Bubble

4. 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:

1. How to get dates & times from users

2. How to store them in the database

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

Some of the different setups you can choose for your Date/Time Picker element

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.

NOTE: The AirDate Time picker plugin was acquired by the Zeroqode team on March 30, 2021. This means it now has a Support team behind it, making it again a great option if you need a more complex Date/Time picker.

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:

The same date can be formatted in several different ways

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.

Joe Brown @cuhpajo

Here's how to add gradient text in @bubble 👋 Not 100% #nocode, but just a little bit of CSS. Here's how...

---

I hope you enjoyed this issue as much as I enjoyed sharing what I’m learning.

If you want to talk a bit more about one of those questions, you can DM me on Twitter or reply to this email. Thanks for reading!

PS: You probably know already, but I launched a Bubble course. We have started recording the first videos and I’m excited. I’ll share more in the following weeks, but if you want to get it now, just know that you can use the code bubblemakers20 to get a 20% discount. It’s going to be awesome!