Demo to preview the settings
Introduction
View the entire database of time zone IDs, identify your time zone by latitude and longitude and convert a time stamp between two time zones using this plugin.
Prerequisites
- You must have the TimeZoneDB account.
How to set up
Getting your API key
Before you start using this plugin, you'll need to create an account to acquire your API key. Follow this link to create an account, then grab your API key (this will be conveniently included in the confirmation email) and paste it into your plugin setting area:
That's it! Head over to any of the next four pages to learn more about each individual API call offered in this plugin.
List Time Zones
Returns a list of all time zones and includes a variety of information about each zone.
Timezone DB documentation: https://timezonedb.com/references/list-time-zone
Create your design
In most cases, you'll be using this API to view the results in either a dropdown to select from, or for some backend workflow action. We're using a repeating group on our example page to demonstrate the proper data source, but you can use this call in a variety of other ways as needed.
That's it! Depending on your use case, you can select from any of the fields available from this API to either display zone names, calculate times from the GMT offset, or view country information.
Get Time and Zone by Position
Determine the time and zone based on a User's current position or a set of coordinates from your database.
Timezone DB documentation: https://timezonedb.com/references/get-time-zone
Create your design
In this example, we'll use the Current User's geographic position's latitude and longitude to determine the current time and zone they're in. To achieve this, we'll send the results of this API call to a group, and use that group as a datasource to feed the inputs.
Depending on how you nest your elements within this group, ensure wherever you're displaying the results has the ability to refer to this group's information.
Set up the API call
Since we're working with a group as our datasource, we'll use the "Display data in group" action to send the results of the API there.
That's it! You can now display any information from the API call in your group. In our example, we're showing the time zone name, the current time in that zone, as well as the GMT offset number.
Get Local Time by Zone
Returns the local time in a specified time zone.
Timezone DB documentation: https://timezonedb.com/references/get-time-zone
Create your design
In this example, we're using the previously created repeating group as our datasource for the dropdown. If you don't use this, simply swap out the datasource with another API call to list all time zones. This API uses the zoneName attribute, so if you choose to save time zone information to your database, use this value for this API call.
Set up the API call
Using the same approach as the last API, use a "Display data in group" action.
Converting the Time
The resulting API response will give you two options for displaying the time. The "formatted" attribute will give you a text-based value that is not easily converted to a date/time value. The "gmtOffset" will give you... you guessed it... the GMT Offset!
In the below example, we'll take the GMT Offset of the new time zone we're attempting to convert to and use it to calculate the new time. By using the Current Date Time (which is formatted in your time zone) and adding the number of GMT Offset minutes, this will give us the time in whatever zone you select.
That's it! After initiating the API call, you'll see the current time in whatever zone you select from the dropdown.
Convert Zones
Takes the time in one time zone and returns the converted time to match a second time zone.
Timezone DB documentation: https://timezonedb.com/references/convert-time-zone
Create your design
In our example, we'll use two dropdowns that are pulling the list of timezones acquired from the List Time Zones API call earlier on our demo page.
Once you've determined your data source, you'll want to create a design that displays the final result. We'll be using the built-in date and time picker element Bubble provides to display the converted date/time.
Since the result of this API is only returning the converted time, the Original Time group isn't necessary. We added this to further illustrate the difference between the two zones that are selected. If you inspect the workflow action further, you'll notice we're using the Get Local Time by Zone API call to show the Original Time.
Where ever you're wanting to display the newly converted time, make sure it can accept the type of content TimeZoneDB - Convert Zones and send the data there.
By default, the API call will use the current UTC time, which is fine for this use-case. Should you want to insert a different time to have converted, that will be placed in the time parameter space.
That's it! Run your test to select a starting time zone and an ending time zone, the resulting date displayed will be the current time in the selected conversion zone.
Changelogs
Update 11.04.24 - Version 2.9.0
- Added "fields" parameter in List Zones API
Update 26.06.23 - Version 2.2.0
- Updated description
Update 04.10.22 - Version 2.1.0
- Updated documentation
Update 05.12.19 - Version 2.0.0
- Updated to API's latest version (2.1)
Update 20.09.17 - Version 1.3.0
- Get Local time by Zone
Update 16.09.17 - Version 1.2.0
- Updated date values in Convert call
Update 18.05.17 - Version 1.1.0
- Added optional Time parameter to Convert Time Zone call
Update 04.01.17 - Version 1.0.0
- version 1: free account parameters only