Bubble Dynamic Time Zone Implementation

Bubble Dynamic Time Zone Implementation

This tutorial explains how to work with dynamic time zones in Bubble when building apps that need to let users select their own time zone rather than using their browser's default.

https://kommodo.ai/recordings/RDQngvvD6UxNog8U58uj

Key Concepts

Bubble's Default Behavior:

• Bubble automatically handles time zones in most cases

• All dates are stored in UTC (Coordinated Universal Time) in the database

• When saving: Bubble converts from your browser's time zone to UTC

• When displaying: Bubble converts from UTC back to your browser's time zone

When Dynamic Time Zones Are Needed: Only necessary when you want to give users control over which time zone they work in, rather than defaulting to their browser's time zone.

Implementation

Displaying Dates (Easy Part)

When showing dates in a different time zone:

1. Use the date's formatted as option

2. Change from "user current time zone" to "dynamic choice"

3. Set the dynamic time zone (e.g., from a dropdown or user's saved preference)

Bubble provides native support for this conversion.

Saving Dates (Challenging Part)

When creating dates in a non-browser time zone, you must manually calculate the offset because Bubble doesn't provide a native solution:

1. Calculate the offset between browser time zone and selected time zone:

   • Extract hour from date in browser's time zone

   • Subtract hour from same date in selected time zone

   • Result is the hour difference (offset)

2. Apply the offset when saving:

   • Take the date from your input

   • Add the offset using plus hours: [offset]

   • This ensures Bubble receives the date as if it came from the selected time zone

Example

The tutorial demonstrates a meeting scheduler where selecting "Cairo" as the time zone properly converts a 12 PM meeting time, accounting for the time difference from the user's actual location (São Paulo).