Possible to display an element dependant on a certain time?

Need help
1

Hey there,

I have an element that shows a current users time based on their location (via the Google API). How could I set a conditional on an icon so say for example once their time was past 11.00pm it would show a moon icon?

This is what I currently have, but have had no luck setting a conditional on the icon

time_icon

2

Any ideas you much smarter than me folks?

3

What is not working ?

Icon is one of the conditionals you can change.

image

I guess the only slight issue is that “current time” is a one time thing on page load. So it won’t advance to a moon at the required time without a “Do every x seconds” loop updating a state.

4

Hi Nigel,

Yeah I want the icon to conditionally act on the following -

currenttime_icon
currenttime_icon861Ă—508 109 KB

currentTime is a state I already have set up.

It’s when I come to the icon, I have tried different conditionals and cannot seem to get one to work?

5

I have the State already set on the time. You can see that updating here -

It’s just the conditional on the Icon that I cannot seem to find the right rules?

6

Aha, yes. I remember this issue from Teamytime I think.

So… you can extract the hour from a date/time quite happily.

But you can’t do both a timezone adjust AND an extract.

It is a horrible hack, but you can set up multiple conditions like this …

image
image786Ă—360 19.3 KB

The regex is

.+?(?=:)

Which extracts everything to the left of the : in hh:mm

Obviously that sets a moon at 1pm, which isn’t the night ! But you get the idea.

2 Likes
7

Thanks Nigel. Awesome as ever.

I went down this route, due to the fact the text layer and icon are separate elements…

time_regex
time_regex996Ă—429 105 KB

It works :slight_smile:

8

Could I elaborate on this and create something where it’s between a certain time? ie; between 11.00pm and 8.00am show the moon icon, then from 8.00am till 11.00pm show the sun icon?

Thanks again @NigelG for all your help. So many different ways to achieve something in Bubble. Falling in love with it more and more each day :slight_smile:

9

Yes, just have multiple conditionals. It will be a bit messy, but it should work.

Am going to do it for Teamytime (it was in the original design, but pulled it as it is harder than it should be it seems).

Will post where I get to.

1 Like
10

Thanks Nigel.

11

This topic was automatically closed after 70 days. New replies are no longer allowed.