Bubble.io Tutorial Show Time with 12 and 24 Hours and Develop Live Clock

This video is about how to display the time in Bubble as 23:59:59 or 11:59:59 PM. Here we switch back and forth in the toggle.

Video transcript:

Hello, my name is Chris Strobl and in this tutorial I will show you how we can better handle the time in the bubble. You probably know that in America, 12-hour times are displayed with AM and PM, whereas in Europe we tend to display 24 hours. Especially in Dashboard.

But this feature is also very relevant if you want to align a website locally to a market. Let's get started straight away, go to Text 1, Insert Dynamic data, Current page Time and format the whole thing.

We go down here and take the time with the seconds. Next we have an icon here and do start/edit workflow. And do. Set State of of element here take the whole page chalk New State, call this time Format and make it a text. And take the ball 12. Now this workflow is only functional if. Time Format is empty or?

The time format is 24 as we copy the workflow once and now say. If the time format is 12, then the state is 24. In this way, we have mapped both scenarios of the bird. Then we go into the Designated and the Tunnel into the Conditional and say if the time format of the day is 12, then we change the icon to the toggle that is activated. So now once we have the complete functionality. Finally we go to the text and now add the conditions and say if. That shows format is 12. Then we change the text to. Current page time for ass. We select a casting here. And now make a custom format here to show the PM EM format. We now go to Preview once and have a look at it.... You can see that we now have the European time, so to speak, if we go to the toggle, we have the international American time with AM and PM. Finally, we want to add a live mode clock in the bubble.

That's why we go into the workflow. You consistently. State of the Element. And we put a new custom state name this time. This is a date and the value is Current page and time. Then we go into the designte Machen at Text 2. Format Time and again we take the European formatting. We then take the toggle, copy it with the workflows. And then add the conditional to the text if. Time Format is 12 now take the text, again insert this dynamically, take the time as State format and make a cast in the format and similar to before. Let's take the American time again. We now go to Preview again to look at the whole thing.

And so now we see a live mode that updates every second. And if we click on the toggle, we also get the American time with EM and Pim. If you liked this video, feel free to click the like button and Zapier Script our channel. If you have any questions, feel free to write us comments. I wish you continued success with Bubble and see you soon.