I’am new on this forum but i’am already using Bubble for months and love it !!
I(am building an MVP for a company project. I’am almost done but I am struggling with dates. My issue is quite simple : a user create an event in his country and specify a starting date.
What I want is if someone create an event in France on July 21 at 10pm it should render “July 21 10pm” everywhere around the world even if you’re in a different timezone (like for flights departures, it’s static according to the country of departure). Right now if someone connect to the app from an other timezone, the start date will change accordingly.
I’ve seen other posts about this topic. I now that dates are saved in UTC in bubble DB.
I want to know the best and cleanest way to proceed. Should I apply an offset when I save the date ? Like “if the user is in UTC-8, offset by 8” and then I display the UTC time everywhere ?
So if you save the timezone the time was created in and always format that time to be shown per that timezone ID, that should work.
So save
Time stamp and
Timezone ID
When showing that date/time, use the format as And set the timezone to be dynamic and to use that data entries timezoneID as the timezone to format to instead of the users browsers timezone ID
^^^this is really confusing for people though and you may want to include the timezone when posting that time so people don’t assume it’s 10PM where they are but know that it’s 10PM in whatever timezone you’re referencing.
It’s almost always easier for people to view things in their own timezones though. It makes more sense to look at mentally (usually)
@reger-alexander I tried to save as static choice but I have an issue to fix : “Value should be date but right now it is a text” So I can’t save it in my DB.
Maybe it’s because I have to manipulate the date first or because i’am using AirDate pluggin ?
@jared.gibb how can i save the timezone ID in the DB ?
you’ll need to use a plugin to grab the timezone id from the browser i think. i’m not sure of any other way to do this. There are several plugins that do that.
you would save it as a text field in the same DB entry you save the date
There’s also other methods of doing this without a plugin I think
When you save an event, you could explicitly save the day, month, hour, minute as individual values
Instead of saving
Date: June 18, 1987 4:21 PM EST
Save
Year: event date:extract year
month: event date:extract month
Day: event date:extract day
Hour: event date:extract hour
minute: event date:extract minute
Then, when displaying the event, you could use current date/time:change year to saved year:change month to saved month:change day to saved day:change hour to saved hour:change minute to saved minute
But I gotta ask, why? Why show 1 timezone no matter what?
If you don’t need to do anything else date related, and only wanna display it I suppose you could save a formatted date as a string to the DB. Then it’s a static string that holds a fixed date(as a string) and not a date object saved in UTC
I have to manipulate date, like doing the difference between two dates, sorting by date, etc… I also need to implement a WF which allows me to delete every outdated events (through Zappier)
Maybe I’am wrong but I always thought that if you need to manipulate dates you should stay as date format ?
You can get the AEST timezone string (looks like America/New_York) from the user’s browser and store that value in the database. You can format the way your date displays in bubble using the dynamic date/time formatting and putting your stored AEST string into the timezone field.
This way the date stays as a date in bubble AND your app will display it using the timezone that you’ve saved in the DB. In this case the tz in which it was created
A couple of extra things to note:
Typically what you’ll see in booking applications is some sort of ‘advanced options’ where you can let the user define the timezone of their appointment manually, but it would default to their browser’s local TZ. This is nice since people sometimes aren’t booking for the TZ in which their device is. You’d need to create a list of TZs and store them in the DB or Option Set. But this is an MVP soooo…
Be careful about subsequent editing of the date. If user A in London creates an appointment in London/United_Kingdom and user B in New York tries to edit that date the built-in date/time picker in bubble will display the date in user B’s timezone America/New_York. Its super confusing and operates different than the text element where you have control of how the date is displayed. I believe 3rd part date/time pickers may let you choose the TZ to be displayed. You can also use the Date and Timezone Tools plugin to find the number of hours offset from UTC and use a :+hours to initialize the picker to display the correct date and then convert it back when saving (kludgy, but works)
If you want to pull the AEST string from the browser there may be a dedicated plugin for this, however you can do this with toolbox plugin and sending the result to a JavascriptToBubble element where you can pick up the string inside bubble
