How to Check User Timezone UTC Value In Bubble.io

Understanding Time Zones in Bubble

In this video, I'm going to be talking about time zones and handling time zones in Bubble. And to get us going, I'm going to show you how to use a plugin to store a user's UTC offset. As often, it can be helpful to turn a user's time and date into a UTC time and date. So here's a registration workflow ready to go. And I want to store the user's UTC offset when they create an account.

Adding a Time Zone Plugin

First of all, I need to add in a time zone plugin. There are several here. I've probably tried most of them. But for the purpose of this demonstration, let's use browser time zone and locale. And I have to then add the element onto the page in order to be able to reference it. So I'm using the new response engine here. And a lot of these elements that have to be added to the page, I find that the best workaround is to put it somewhere barely noticeable and then set the height to just one pixel. And then it doesn't really mess up your design.

Referencing the Plugin

So let's just see what values we can get from this plugin. So I'm going to reference the plugin. Oh, it looks like I've got more than one on the page. That's not going to plan. So I'm up there. Let's delete that. I think the response engine was being just a little bit buggy at that point, which means that I will have time zone B in here, perfect. So let's go back to my text. And I'm going to be referencing time zone locale B.

Displaying Time Zone Information

So let's have a look at the time zone ID. And then let's also print a browser offset in minutes. This is going to help me unpack quite a few things I've learned with using time zones in Bubble. One thing I've learned is that some countries have time zones that aren't, say, on the hour. So when I'm converting time and date values, it's really helpful to use minutes or even seconds as your measurement of offset rather than hours, because some time zones are a fraction of the hour.

Testing the Time Zone Display

Let's have a preview of how this looks, what date it pulls in. So I'm in the UK. We're currently in British summer time, which is a UTC offset of 60 minutes. So there we go. That's worked. And so now I can add in my registration workflow.

Setting Up the Registration Workflow

So account, sign user up. I don't think I've labeled my fields very clearly. No, I haven't. So here we go. Let's tidy this up. Email, password, name. We think that is important to keep in the videos some of these mistakes, just in case there's someone looking for just the right fix and we cover it when we accidentally find that something doesn't work.

Creating a UTC Offset Field

And then I need to create a new field. I'm going to call this UTC offset minutes. Again, using time zones, I find-- and we're going to make it numbered because we want to be able to do maths with it-- I find really clear labels helpful because, yeah, if you're trying to build a can only clone or anything to do with booking, if you have to handle user time zones, my perspective is that it is currently the trickiest thing to do with Bubble. Not impossible, but in an application that has anything to do with time zones, I would say that the time zone aspect is likely to be the thing that will take the longest, at least in my experience.

Finalizing the Registration Workflow

So here we go. Offset in minutes. Fresh. So I know that that workflow is going to now create a user using these details, and it will save the UTC offset.

Challenges with Time Zones in Bubble

Now here's my list of why working with time zones is a real pain. First point is that using a plugin like the browser time zone like how or anything that automatically extracts the time zone from the user's browser, that can be wrong. And with the rise of more privacy-conscious web browsers, this can be deliberately obscured to hide the user's location.

Implementing User-Overridable Time Zones

So in the recent app I was making for a client, I had a dropdown which used a plugin like this to have a good guess, which can be fairly reliable, good guess at the user's time zone, and place that value in a dropdown. But the dropdown allowed the user to override that value. And that's because it was critical to the application that we had an accurate time zone.

Time Zone Adjustments and Viewing

The other thing to bear in mind with using time zones is that if you yourself are viewing a page in Bubble and you've printed a current date time and you've manipulated that value while you're using it in a workflow, that is going to be adjusted for you, the current user, and your time zone. So even though we can use the offset to move values back into UTC, you're still going to view them, plus or minus whatever your value of UTC is. Yeah, that is very frustrating.

Changing UTC Offsets

Finally, a user's UTC offset can change. For example, in the UK where I am twice a year, once in the spring and once in the autumn, we move from UTC minus 60 minutes to UTC zero. So there's a flaw in the plan here potentially of taking a user's browser's time zone UTC offset when they register, because anything from a week later to six months later, their UTC offset might not be the same. These are all things that you end up discovering that you have to consider when you are working with time zones in Bubble.