Bubble Time Zones Dropdown - Part 2
In this Bubble tutorial we demonstrate how to use the timezoneDB API to get a list of timezones and display this list in a dropdown for your Bubble app users and combine this with the Browser Timezone plugin to auto complete the timezone dropdown.
Automatically populate time zones: Learn how to save users precious seconds with browser timezone detection in Bubble!
Test different time zones easily: Discover the trick to override and test various time zones in your Bubble app without changing locations.
Struggling with time zones in Bubble? Master the new tools that make handling time zones a breeze in 2023!
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.