Time Zone Issue

Users are inputting the time zone as say 7:00 PM local time, but when Bubble stores it or something and API calls are made out of the app using the date, the date is 11:00PM.

Why is this?

Is everything in UTC?

How do I get the dates to be correct and correlate to the dates inside of the Bubble app which the user submitted based on his/her local time?

Bubble automatically collects and outputs times in user’s time-zone. This works amazingly well most of the time. However, when you do more advanced things with it, then it can get quite complicated.

For example, if you want to, say, send that time to a third party you also need to have collected the time zone that it was inputted in so that the thirdy party interprets it correctly. If you want user’s to input a time and select a time zone (perhaps a different one than theirs) then you need to translate that time and store it in the DB since Bubble auto-assumes it’s in the user’s time zone.

Hope this helps point you in the right direction. There are more details on the forum for specific code to implement many of the more advanced time-based requirements.

Best,
Scott

I looked through the forum.

Can anyone confirm that any time collected without designating or setting a timezone on collection is in UTC and this is why 7:00 PM becomes 11:00 PM when sent via the API connector?

And is the work around to this to ensure that the information in the bubble DB is accurate to their local time input (example, departure of a city which could be elsewhere) to save the information as a TEXT field (by formatting the time as text i assume) ?

I believe Bubble stores it in UTC, but I’m not 100% sure anymore.

That said, you can easily format the time to display in a different timezone when sending to an API, displaying in bubble, etc. Just select “format as” right after referencing the time. Hope this helps.

1 Like

Yes but how do you collect the time zone based on a departure city which could be elsewhere, and then pass that timezone along with the API call?

Think about booking a trip from one city that departs from another city destined for a third city. Three different time zones are in effect.

The way we’ve done it is translate the input time to UTC (which means we translate it dynamically based on the user’s current time zone). We set-up an algorithm for this on blockspring and just call it. So, it’s simple for us now that we have the blockspring code. Took a bit of work to get it there though.

I think someone created something similar for public use (after we had already done it ourselves). I’ll search the forum and see if I can find it.

Whitney set-up the blockspring we use for public use actually, so you’re more than welcome to use it. It makes all of this quite easy.

Here’s a link to her post in the forum.

When I save the inputted information to the DB it is already in UTC time.

How do I save the time based on another field (the departure location/city) within the same input form?

For example a flight departure at 3:00 PM Rome time traveling to London U.K.?

Oh, fun with timezones…

First, I always structure my times in yyyy-mm-dd"T"HH:MM:ss"Z" format when I send them through an API

Custom Format = yyyy-mm-dd"T"HH:MM:ss"Z"

An easy way to convert 3pm Rome Time → 2pm London Time would be to use this custom block

The timezone inputs to the block need to be formated like column “Tz” on this wikipedia page.

Let me know if you’re still stuck. I’ve spent many hours wrangling timezones in Bubble and could dig in on this with you further if need be.

Whitney

3 Likes

Doesn’t look like the custom block works anymore with Bubble for this unfortunately.

Are you seeing an error? I just re-tested it and it worked for me.

I get it working fine inside of Blockspring but when i try to install last block inside of Bubble it doesn’t work and produces an error.

I updated the input type so you can now use this block as “data”, so you should be set.

You likely already know these steps, but here’s a summary for anyone else who comes aross this post:

  1. Install “Timezone Converter (Public)” as a blockspring plug-in
  2. To use it, “Get data from external API”, you should see “Timezone Converter (Public)” as an option.
  3. Specify your timezone fields dynamically and your date/time you want to convert
  4. Make sure that the time is formatted as yyyy-mm-dd"T"HH:MM:ss"Z" and you select UTC as the timezone

i sent the api request with the same format - yyyy-mm-dd"T"HH:MM:ss"Z" - but nothing changed.

When I input 3pm local time to the system it gets received as 7:00 pm by the application that was called out by the api.

In order to simply get the data sent by the API correctly and according to ‘local time’ to what the user inputted, couldn’t I save the date as text? And pass the text through the API?

Or how exactly do I setup the block to work? I must know the timezone ID/name I guess of the airport departure and arrival location. And I assume I must save this information so that I can make the call to the Block before sending the converted time from UTC (which bubble saves as a default and is the cause for the discrepency) via the API to the secondary application? This way the departure airport timezone ID matches the timezone sent by the API?

This topic was automatically closed after 70 days. New replies are no longer allowed.

Hi there, we just released two features giving you more control over handling timezones. Learn more here: New features to override timezones