# Date operations (No API)

**URL:** <https://community.thunkable.com/t/date-operations-no-api/1355407>\
**Category:** Questions about Thunkable X\
**Tags:** date\_picker\
**Created:** [June 21, 2021, 2:50am UTC](https://community.thunkable.com/t/date-operations-no-api/1355407 "2021-06-21T02:50:06Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![id.salazar88zrunh](https://avatars.discourse-cdn.com/v4/letter/i/c0e974/32.png) [@id.salazar88zrunh](https://community.thunkable.com/u/id.salazar88zrunh)\
**Post date:** [June 21, 2021, 2:50am UTC](https://community.thunkable.com/t/date-operations-no-api/1355407/1 "2021-06-21T02:50:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 21, 2021, 6:45am UTC](https://community.thunkable.com/t/date-operations-no-api/1355407/2 "2021-06-21T06:45:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 21, 2021, 11:45am UTC](https://community.thunkable.com/t/date-operations-no-api/1355407/3 "2021-06-21T11:45:07Z")

</div>

I made a simple JavaScript code to get the date after certain number of days.  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/a/3abdde88c6167caa0fdf318dd601e57c91150431.png)  
This is giving today’s date but if I add some days I get the future date in the label.  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/9/494bca8f736409726dae0e87bcd1f94c75cc7716.png)

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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/0/7044af6dde75f37b04b58893e40681c5762ecdec.png)

This is the JavaScript Code

```auto
<!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>

```

---

<div class="post-metadata">

**Author:** ![alex\_ezacae](https://avatars.discourse-cdn.com/v4/letter/a/278dde/32.png) [@alex\_ezacae](https://community.thunkable.com/u/alex_ezacae)\
**Post date:** [September 27, 2021, 5:31pm UTC](https://community.thunkable.com/t/date-operations-no-api/1355407/4 "2021-09-27T17:31:53Z")

</div>

hello @muneer ,

can you share the project ?

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [September 27, 2021, 6:50pm UTC](https://community.thunkable.com/t/date-operations-no-api/1355407/5 "2021-09-27T18:50:29Z")

</div>

See [this link](https://x.thunkable.com/projectPage/60d06b27eb9be10011749fcd)

---

<div class="post-metadata">

**Author:** ![alex\_ezacae](https://avatars.discourse-cdn.com/v4/letter/a/278dde/32.png) [@alex\_ezacae](https://community.thunkable.com/u/alex_ezacae)\
**Post date:** [September 28, 2021, 6:10am UTC](https://community.thunkable.com/t/date-operations-no-api/1355407/6 "2021-09-28T06:10:13Z")

</div>

thanks, have a good day

---

<div class="post-metadata">

**Author:** ![alex\_ezacae](https://avatars.discourse-cdn.com/v4/letter/a/278dde/32.png) [@alex\_ezacae](https://community.thunkable.com/u/alex_ezacae)\
**Post date:** [September 30, 2021, 10:44am UTC](https://community.thunkable.com/t/date-operations-no-api/1355407/7 "2021-09-30T10:44:51Z")

</div>

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

```auto
<!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>

```

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [September 30, 2021, 12:39pm UTC](https://community.thunkable.com/t/date-operations-no-api/1355407/8 "2021-09-30T12:39:59Z")

</div>

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

Let me explain what the code means.

```auto
<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.

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 1:20pm UTC](https://community.thunkable.com/t/date-operations-no-api/1355407/9 "2024-11-08T13:20:12Z")

</div>