Beginner tips for formatting date and time in Bubble.io

Introduction to Date and Time Formatting in Bubble.io

This Bubble tutorial video is going to be really quick and it's all about displaying date and time data in Bubble. On my page, I've got the Bubble zone date time picker and I've got some text to display, so I'm going to link it up so date picker aid value and display it there. Let's see what happens. Let's pick date and the time.

Default Date and Time Display

Okay, so there we go. It's giving 1900 hours 7 p.m. on the 6th of February, but let's say I want to change how that's displayed. For example, I have a date field in my database and I want to display the information in that field the date value.

Using Format Options in Bubble.io

I can go on to and click format as and then it gives me all these different pre-formatted choices of how to display the data. So let's try this one and choose another date and time and you can see it's displaying it based on the format type. I can also go down to custom and I can enter in text values that represent characters to be turned into the date and time data.

Custom Date Formatting Techniques

For example, if I go MMM and it gives me a preview here, it's going to show me month as three letters. If I go 4M's it gives me the full month. A few things to look out for here. Minutes and months both begin with M's so how would I show minutes? Well, I do two capital M's to show minutes and you'll just have to take my word for it now that I'm looking at my computer and it is 44 minutes past the hour.

Differentiating Minutes and Months

If I want to show just one capital M it also shows me 44 but what two capital M's do is it would mean that if it was eight minutes past the hour it would show 0.8. This would just show 8. S is another great one that shows you oh I don't know what the technical term is but you know the month so it's the eighth of February when I'm recording this so D for day eighth.

Additional Formatting Options

Show me oh and the one last I was trying to think of is T for PM. Now just off the top of my head I'm thinking of all the ways I'll trip myself up with here so there's mixing months and minutes up and there's also what if I want to capitalize it?

Capitalizing Date Elements

So if I did three capital M's I'm not getting FEB capitalized. If I do three lowercase m's I get FEB and if I want to capitalize it I would do it through here uppercase as a modifier on the end. There we go.

Understanding Time Zones in Bubble.io

What else can we talk about here? Yeah really quickly time zones. So when time date data is stored in the Bubble database, it stores it as Unix time which is basically an internet standard for storing time and it's kind of a continuous count all the way back from the 1970s.

Bubble's Automatic Time Zone Conversion

What Bubble does, and most of the time this is really helpful, is that when Bubble displays Unix time to a user like you're printing a time date value stored in your database is that Bubble will turn that into what Bubble believes to be the right time zone for the user based on the data that Bubble exchanges with the browser when the user accesses the page.

Overriding Time Zone Display

So for example going back here let's get the date the time printed back in. Brush it again. Okay, it's showing me that time because that is the time for me and you can override this by changing the time zone expressed here so if I wanted to show you the time let's just go with somewhere that I know is gonna be really different. Rome for example.

Conclusion and Practical Example

So I'm gonna say the 7th of February 7 p.m. for me is going to be 8 p.m. expressed to those people in Rome. So they have a really quick overview of some of the ways that I've certainly tripped myself up in the past and got confused over presenting time date values in Bubble.io.