How to: Timezone Dropdown with API

Adding a Timezone Dropdown with API in Bubble

In this Bubble tutorial video, I'm going to show you how to add a time zone dropdown to a registration flow. This can be very useful if anything in your app requires you to save hard by coding a time zone for a user. But before we get started, did you know you can be a Planet No Code member? We've got over a hundred Bubble tutorial videos. Many of them are member exclusive, they can only be found on our website. And if you like videos like this, it just helps our cause if you can like and subscribe.

Using the TimezoneDB API

So, let's jump in to a time zone API. For that, I'm going to be using the API provided by timezonedb.com. The endpoint is here, I'm going to copy that. I'm going to go into my plugins and add a new API. Name this timezonedb. The authentication is a private key in the URL. And I'm going to use a get call and say get list of time zones. Then I'm going to go and get my API key. Paste it into the key value box.

Testing the API Connection

I think I can test it now. Oh, invalid API key. I think that's because they want key as the parameter name. Let's change that to key. Return to non object and you pick JSON. Okay, I think that is because if I look at the documentation here, I should say format equals JSON in the URL. So, let's do that. We could probably just add it as a parameter. Let's try that. Format JSON.

Understanding the API Response

Cool, here we go. So, we get all of this timezone data back. Tons of data. And one of the advantages of using the API call is that we don't just get the zone name. And that's what I mean by this part here. And that's what is essential for feeding back into dynamic timezone positions in Bubble. If you've gone into settings general and you've enabled timezone overrides, that's the label for the timezone that you'll need. But it also provides you with all of these GMT offsets.

Using the Timezone Data in Bubble

So, that can be again helpful for doing calculations of converting different timezones for your users. But do remember that if countries have got daylight savings or their hours, it shifts by an hour here or there, then the GMT offset is going to change depending on the time of year that you save it from this API call. But anyway, it's still very useful. And so, we can now go in noticing that use as is data. And we can go into design. We can say dynamic choices. And we can say get this of timezone.

Creating a Dynamic Dropdown

And then we get data from external API. This is the timezones. Ooh. I think we need to have timezones timezone zones. Yes, there we go. Current options zone name. Then if I preview. And now I get my list of timezones that I can pick. And again, the advantage of using the API is that we can not only save the zone name, but I can take data out, the extra data that the API provides.

Displaying Additional Timezone Information

So, I can say dropdown timezones value, GMT offset. So then if I go back here and I choose Fiji, that tells me the GMT offset of Fiji. So, there you have it. That is a very quick way of using an excellent API to get a list of timezones which can be very helpful for adding in a timezone dropdown picker to the registration flow of your Bubble app.