Date operations (No API)

Questions about Thunkable
1

Hi everyone
It´s been a while since my last post in the community
I have a couple of questions regarding operations with dates (I didn´t find a solution on the community thad doesn´t use API´s)

I need to pick a date and do some maths with it and then show the results in other labels

Example: I selected 2021-10-21
Then:
Label 1: 2021-10-21 + 5= 2021-10-26
Label 2: 2021-10-26 (result of the previous operation) + 10= 2021-11-05

Of course ther is two “problems”. Wich blocks I need to use? How can I do the maths with months (Feb has 28 days, etc.)?

And my second question is… Is it possible to “translate” dates using block “date imput” into other lenguages? June → Junio (Spanish)

Thanks in advance

1 Like
2

Connect a Google sheet to your app and use the seconds since 1970 block and pass it to the sheet to convert to normal date and do all date operations.

3 Likes
3

I made a simple JavaScript code to get the date after certain number of days.
image
This is giving today’s date but if I add some days I get the future date in the label.
image

All managed by a web viewer extension running .html file added to the project as an asset…

The Google sheet solution is still a viable solution and it works just as good.

This is the blocks of the project

image
image896×494 33.7 KB

This is the JavaScript Code

<!DOCTYPE html>
<html>
<head>
<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>
</head>

<script>
  ThunkableWebviewerExtension.receiveMessage(function(message) {
    const dateObj = JSON.parse(message);
    const myDate = new Date(dateObj[0], dateObj[1] - 1, dateObj[2]);
    myDate.setDate(myDate.getDate() + dateObj[3]);
    ThunkableWebviewerExtension.postMessage(myDate.toUTCString());
});
</script>
</html>
2 Likes
4

hello @muneer ,

can you share the project ?

1 Like
5

See this link

2 Likes
6

thanks, have a good day

1 Like
7

Hello,
I just do not understand where do you write your Js code ?

<!DOCTYPE html>
<html>
<head>
<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>
</head>

<script>
  ThunkableWebviewerExtension.receiveMessage(function(message) {
    const dateObj = JSON.parse(message);
    const myDate = new Date(dateObj[0], dateObj[1] - 1, dateObj[2]);
    myDate.setDate(myDate.getDate() + dateObj[3]);
    ThunkableWebviewerExtension.postMessage(myDate);
});
</script>
</html>
1 Like
8

Anywhere in your HTML that has codes between <script> and </script> is JavaScript code.

Let me explain what the code means.

<script>
  ThunkableWebviewerExtension.receiveMessage(function(message) {
    const dateObj = JSON.parse(message);
    const myDate = new Date(dateObj[0], dateObj[1] - 1, dateObj[2]);
    myDate.setDate(myDate.getDate() + dateObj[3]);
    ThunkableWebviewerExtension.postMessage(myDate);
});
</script>

The first line ThunkableWebviewerExtension.receiveMessage(function(message) { is the Thunkable Extension that reads the data passed from the app to the Web Viewer using the Post Message block. This line requires a call back function which is why you see function(message). The data passed from the app is in the message variable.

The second line const dateObj = JSON.parse(message); is creating a variable in JS that receives the data sent from the app and treat it as JSON object.

The third line const myDate = new Date(dateObj[0], dateObj[1] - 1, dateObj[2]); is creating a variable in JS to hold a date object using the properties passed from the app inside the JSON object.

The forth line myDate.setDate(myDate.getDate() + dateObj[3]); adjusting the date object by adding to it the last property of the JSON object passed from the app.

The last line ThunkableWebviewerExtension.postMessage(myDate); is another Thunkable extension to send data from the JS code back to the app which will be received by the Receive Message block

That’s it.

2 Likes