Working with Times and Dates in Thunkable

[domhnallohanlon]

Updated Feb 2023 with new and improved project link!

One feature that you often find yourself in need of when programming is the ability to work with dates and times.

In this first tutorial we’ll learn how to access the World Clock API (thanks to @actech for sharing this resource) and display a specific part of the response to the user.

Click to remix the “Tempus” app

Design

The design for this app is very simple, requiring just 6 components:

Everything put together looks like this:

1. Create a variable

Let’s start by creating a local variable in our app to store the response from the API.

JSON is a common data interchange format, and is used widely to transmit information. Thankfully for us, Thunkable makes it really easy to work with JSON data.

2. Make an API Request

Some APIs will require you to enter a username and password, or an access token, but this is not the case for the World Clock API.

Click on this link to see the JSON that this request returns.

3. Working with Objects

There are several name/value pairs in the response. In order to see a specific one, convert the JSON into an object.

From that object use the “get property” block to read the value we want. In our case we use dayOfTheWeek to find out what day it is.

4. Parsing Text

Another name in our JSON response is currentDateTime. The corresponding value contains both the date and the time.

The first 10 characters of the value are the date in the format: YYYY-MM-DD, so this is why we only get the first 10 characters.

If we want to get the time we get the 5 characters from letter #12 to letter #16. We need to use 5 characters because the time is in the format “HH:mm”

Your Turn

If you want to use this app as a reference then you can create your own copy by clicking on the link below

Click to remix the “Tempus” app

[domhnallohanlon]

Part 2: Simple Stopwatch

Another request we often hear is that users want to create a stopwatch so that they can keep track of sports like running or cycling. Part 2 of the Tempus app includes a simple stopwatch that you can include in your own projects.

Click to remix the “Tempus” app

Components

In this example I’ve used a label to display the elapsed time and two buttons. One button is to start/stop the stopwatch and the other is to reset the timer.

Don’t forget to include a Timer component too, as it keeps track of time for us. Use the following settings if you want your app to work the same as mine:

Incrementer

Start by creating a local variable to keep track of how long the stopwatch has been running for. I’ve called my variable time but you can call it whatever you like.

When the timer is running we increase the value by 1 seconds and display this new value in the label.

Reset

When the reset button is clicked we zero the timer and display the new value in the label.

Start/Stop

Finally a simple toggle is used to start and stop the timer.

To learn more about creating your own toggle buttons, take a look at the sample app “Toggl”

Creating a Toggle in Thunkable

You can create an on/off switch, also known as a toggle switch, in your app with a variety of different components and blocks in Thunkable X. Switch The switch component is probably the easiest to get started with. When the switch is clicked, the value changes. The newValue variable is either true or false, depending on whether the switch is on or off. In this example, a label is used to display the words “On” or “Off” depending on the position of the string. [05] Click to remix the “Toggl”…

Your turn

If you want to use this app as a reference then you can create your own copy by clicking on the link below

Click here to remix the “Tempus” app

[domhnallohanlon]

Part 3: Countdown

Another common way use the timer components is to create a countdown. There are lots of different UIs for this, but to keep it as simple as possible we’ll be working with just minutes and seconds. If you remix this project, you can add in hours or days too!

Click here to remix the “Tempus” app

Components

There are two TextInputs at the top of the screen, separated by a label.

Underneath this is the main output label, which shows how much time is left in the countdown.

Finally, there’s a colour changing start/stop button which starts and resets the countdown.

Variables

The first couple of blocks we need are variables to keep track of:

1. How much time is left in the countdown, called countdown
2. Whether or not the countdown is running, called isCounting

Start the countdown

When the start button is pressed, the minutes are converted to seconds, and added to the rest of the seconds.

After that, it’s just a matter of creating a simple toggle button

Update the Label

Finally we want to show the number of minutes and seconds remaining.

Each time the timer fires, we subtract 1 from our countdown variable and do a little bit of math to convert all the seconds back in to minutes : seconds format.

The ternary statement is used to append a leading 0 if the number of seconds is less that 10, so the user sees 1:09 rather that 1:9 which looks a bit off putting

Your turn

If you want to use this app as a reference then you can create your own copy by clicking on the link below

Click here to remix the “Tempus” app

[nqtapp]

How can i change the time zone??

[domhnallohanlon]

In the URL, where it says /gmt/ simply replace this with the time zone you want.

[ali4oman]

How can I add # of days to a specific date, for example adding 100 days to 28/02/2019.
Also, how can I calculate # of days between 2 dates, for example how many days between 15/04/2018 and 20/03/2019.
thanks

[maxb]

Edit: I solved using the time directly from the json without the object thing which apparently doesn’t work, maybe wrong command?

Thx but it’s not working.

I get the JSON string but the get property of object does not work and stays empty, I’m gonna try using the json as a string and get the time from that (i only need the HH:mm for now)

[Nenye]

Have you had the opportunity to work on this?

[maxb]

there is a time & date native component if i’m not wrong, isn’t it?

[Nenye]

Yeah but I was looking for a sample for a countdown timer. I’ve found one now though, thanks.

[schoenci]

i tried changing /gmt/ for /gmt-3/ but that doesnt work. Is it correct how i changed it?

[taravat.mahavar83qr7]

I did the same thing for countdown but when i enter a time and click the start button numbers doesn’t change can someone please help me with this

[04253tanyachanokcu0]

@domhnallohanlon
How to make the Countdown with DAY HOUR MIN SEC ?

[alex_ezacae]

hello @domhnallohanlon ,
I tried to see the tempus app because I have to issues understanding how the timer component is working.
But the app seems not available; Do you have any links that is still working ?

[muneer]

Try this link

[alex_ezacae]

Perfect thanks !!!

[carlinmclellan]

Hi @muneer could you please post the link again?

[muneer]

@carlinmclellan

post the link again

Unfortunately, I deleted the copy I have.

[goldenway4800dx]

I am also wondering how to calculate # of days between 2 dates.