Adding Hours using Variables


So I’m trying to create a time picker to allow the user to select a time by using the up and down arrows as shown on the image attached. I want the first to go up in hours like a 24 hr clock and the minutes to :59 using the arrows.

However I am struggling to get my head around the variables, any help would be greatly appreciated :smile:

Let’s start with hours (I’m assuming a 12-hour clock).

Down arrow:
If text on widget hoursField is greater than 1
Set text on hoursField to: [[target.text - 1]]

Up arrow:
If text on widget hoursField is less than 12
Set text on hoursField to: [[target.text + 1]]

Repeat for minutes but change the up arrow condition from 12 to 59 and the down arrow to greater than or equal 1.

1 Like

Thank you so much for your help :slight_smile: that’s brilliant thank you.

How would I go about adding a ‘0’ in front of the of some of the hours such as 06:45 to indicate that it’s AM?

Similar with minutes rather than just displaying 8, I’d like it to display ‘:08’.

Thank you :slight_smile:

Try this:

[[ ('x0' + (target.text - 1)).slice(-2) ]]

On my phone right now so can’t check I didn’t make a dumb mistake but should work.

Works perfectly thank you so much for your help :slight_smile:

Do you have any idea regarding how once it hits 23 hrs, it rolls back to 00? Rather than just stopping on 23 and continues in a continuous loop? :slight_smile:

You can do that by adding an additional case:

If text is less than 23
Set text on hoursField to: [[target.text +1]]

Set text on hoursField to: 00

1 Like

Thank you so much :slight_smile:


I was wondering how would I go about once the digits have reached for example 12:59 it then goes to 13:00? :slight_smile:



But not if hours is at 23, right? Then both hours and minutes need to be set to 00.

The answer is more conditional cases.

When I click the minute increment arrow [event], if minutes are 59 and hours are less than 23 [condition], set minutes to 00 and increase hours by 1 [actions].

However you’ll continue to discover more edge cases and conditions. At this point I might start to rethink how the whole thing is built. I’d probably use a single variable that counts the timer in minutes and then displays minutes and hours based on the total count of minutes.

For example, hours can be represented as:
[[ Math.floor(totalMinutesCount / 60) ]]

And minutes represented as:
[[ totalMinutesCount % 60 ]]

So, assuming a totalMinutesCount value of 381:
[[ ('x0' + Math.floor(totalMinutesCount / 60)).slice(-2) ]]:[[ ('x0' + (totalMinutesCount % 60).slice(-2) ]] yields 06:21

Then you could have your hour buttons add/subtract 60 to totalMinutesCount and your minute buttons add/subtract 1.

If you go this way, you won’t need to add special cases for rolling over to the next hour when minutes goes past 59, it will all happen automatically.