Working with Timezones and Timezone Drop Downs in Bubble

I want to demonstrate to you one more tip when working with timezones and timezone drop downs in Bubble. And in the previous video, I've demonstrated how you can create a drop down just like this, which lists through all different timezones. And we're using the timezonedb.com API to do that. Check out the previous video if you want to catch up. But what if I want to automatically populate this with the current user's timezone, saving them precious second hands when they register for my Bubble app.

Become a Planet No Code Member and Get Exclusive Content

But before I do that, did you know that you can become a Planet No Code member? That at planetnocode.com, we've got videos that you cannot find on our YouTube channel. So they are exclusive to our members. And if you like this video, hit subscribe, hit like, it just helps us out loads.

Populating the Timezone Field Dynamically

Let's populate this field dynamically. To do that, I'm going to use a plug in called browser, timezone and locale. Install. I'm going to add the element for this plug in to my page. And then I'm going to set up the default value for my timezone selector.

Remember, all of this here that is being pulled in from the timezone database API. Check out the last video if you're unsure on that. But let's set up a default value. And so we have to go through the process of get data from an external API. List of timezones. And then we want to list out the zones and we want to filter them. And so we can say, Zone Name, is equal to, and this is where we use the timezone detector plug in, browser, timezone locale, and I say timezone ID. And then we're filtering it, Bubble doesn't know if we're going to get a list or get one thing, so we just say use the first item because we're looking for an exact match.

Let's preview that. Okay, and there you can see it automatically fills in the timezone that I'm actually at, and that is Europe London. I'm going to share the same trick I shared in the previous video here, which is what if I want to fake it? What if I want to test the timezone detection out for a different region? So in Chrome, you can go bring up the browser, the Dev Inspector tools, and we can go More tools, sensors, and we can override the timezone that our web browser gives Bubble.

And so let's change it to Berlin, and then refresh the page. And you can see it updates to Berlin. Let's do one more. And it updates it to Tokyo. So they have it. That is another trick to use in timezones, which has been a bit of an upward struggle with Bubble. Timezones have not been the easiest thing to manipulate, but thanks to new tools that they've added in in recent months, in 2023, they're a lot easier to work with. If you've got any questions about timezones, please leave a comment below.