Demonstrating Time Zone Dropdown Functionality in Bubble
I want to demonstrate to you one more tip when working with time zones and time zone dropdowns in Bubble. In the previous video, I've demonstrated how you can create a dropdown just like this, which lists through all different time zones 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 time zone, saving them precious seconds when they register for my Bubble app.
Planet No Code Membership Benefits
But before I do that, did you know that you can become a Planet No Code member? 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 Time Zone Field Dynamically
Let's populate this field dynamically. To do that, I'm going to use a plugin called browser time zone and locale. Install. I'm going to add the element for this plugin to my page. And then I'm going to set up the default value for my time zone selector. Remember all of this here that has been pulled in from the time zone database API. Check out the last video if you're unsure on that. But let's set up a default value.
Setting Up Default Value with API Data
And so we have to go through the process of get data from an external API. This is the time zones. 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 time zone detector plugin. Browser time zone locale. And I say time zone ID. And then we're filtering it, Bubble doesn't know if we're going to get list or get one thing. So we just say use the first item because we're looking for an exact match.
Previewing the Automatically Filled Time Zone
Let's preview that. Okay, and there you can see it automatically fills in the time zone that I'm actually at. And that is Europe, London. And I'm going to share the same trick I shared in a previous video here, which is what if I want to fake it? What if I want to test the time zone detection out for a different region?
Testing Time Zone Detection for Different Regions
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 time zone 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 Berlin. Let's do one more. And it updates it to Tokyo.
Conclusion and Final Thoughts
So there you have it. That is another trick using time zones, which has been a bit of an upward struggle with Bubble. Time zones have not been the easiest thing to manipulate, but thanks to the 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 time zones, please leave a comment below.