Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Beginner tips for formatting date and time in Bubble.io

In this Bubble.io tutorial we share some tips and tricks for working with time and date data in Bubble. This video includes how to customize the format of dates and a quick explanation about using timezones in Bubble.

This Bubble tutorial video is going to be really quick and it's all about displaying date and time data in Bubble.

Date Picker

So on my page, I've got Bubbles own date time picker and I've got some text to display. So I'm going to link it up. So date picker, age, value and display it there. Let's see what happens. Let's pick date and the time. Okay, so there we go. So it's giving 1900 hours, 7 PM on the sixth of February. But let's say I want to change how that's displayed. So for example, I have a date field in my database and I want to display the information in that field, the date value. I can go on to and click Format As, and then it gives me all these different preformatted 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. So for example, if I go MMM and I and it gives me a preview here, it's going to show me Month as three letters.

If I go for M, it gives me the full Month. Few things to look out for here. Minutes and Months both begin with M. So how would I show minutes? Well, I do two capital M s to show minutes, and you just have to take my word for it now that I'm looking on my computer and it is 44 minutes past the hour. 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 08. This would just show 8. S is another great one that shows you the Nnth of the month. So it's the eighth of February when I'm recording this. So D for day, eighth. And the one 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 trip myself up with here. So there's mixing months and minutes up. And there's also... What if I want to capitalize it? 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 then if I want to capitalize it, I would do it through here, uppercase, as a modifier on the end. There we go.

Working with timezones 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 a continuous account all the way back from the 1970s. 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.

So for example, going back here, let's get the date, the time, printed back in. Refresh 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 the time, let's just go with somewhere that I know is going to be really different.

Rome, for example. So I'm going to say the seventh of February, 7 PM for me is going to be 8 PM, expressed to those people in in Rome. So there you have it, 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.

 

Latest videos

lockcrossmenu