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.
Unlock the secrets of date and time: Learn how to format and display data like a pro in Bubble's date formatting tutorial!
Master time zones in Bubble: Discover how to handle time zones and display dates accurately for users worldwide.
Confused by Unix time? See how Bubble converts it to user-friendly formats and customize your app's time display.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.