Convert datetime - template

Hay!
I try to convert a datetime (format: YYYY-MM-DDT00:00:00) from a json format and put it in a cell of a table to display it on the dashboard.
It doesn't work and I don´t know how I get it.
Sorry, I'm a beginner with java / html.
Can someone help me?
Any suggestions for improvement are more than welcome.
Thanks you in advance!!!

My source code:

<table id="table" border="1">
    <tr>
        <script>
            function myFunction()  {
            var d = new Date(msg.payload.daytime);
            var n = d.getMonth(); 
            }
        </script>
        
        <th>{{myFunction()}}</th>
        <th>{{msg.payload.Forecasts[0].status}}</th>
        
    </tr>
    

</table>

Your script tags are in the wrong place for starters.

Assuming that is in a Dashboard template node, put the script before the <tr> tag.

The second problem is that you are not returning anything from your JavaScript function so there is nothing to display.

        <script>
            function myFunction()  {
                var d = new Date(msg.payload.daytime);
                var n = d.getMonth(); 
                return n;
            }
        </script>

@TotallyInformation:
Thank you for your help.
Now I canched the source code, but it doesn't work.
Even I change the command "new Date(msg.payload.daytime);" to "new Date(2019-11-29T00:00:00);" as a example.

<table id="table" border="1">
  <script>
            function myFunction()  {
            var d = new Date(msg.payload.daytime);
            var n = d.getMonth(); 
            return n;
            }
    </script>   
 <tr>
        <th>{{myFunction()}}</th>
        <th>{{msg.payload.Forecasts[0].status}}</th>
        
    </tr>
    

</table>

<script>
    function myFunction()  {
        var d = new Date(msg.payload.daytime);
        var n = d.getMonth(); 
        return n;
    }
</script>   

<table id="table" border="1">
    <tr>
        <th>{{myFunction()}}</th>
        <th>{{msg.payload.Forecasts[0].status}}</th>
    </tr>
</table>

Don't put script tags inside other tags, I'm not sure whether all browsers will treat that correctly.

The date/time string should really have a "Z" on the end to make it a proper ISO format. Or another timezone if it isn't Zulu time (UTC).

However, the following works correctly:

console.log(new Date('2019-11-29T00:00:00'))
console.log( (new Date('2019-11-29T00:00:00')).getMonth() )

So I suggest you double check what you are actually sending in the msg since it may be invalid.

Open you're browsers developer console to see if there are errors.

Why not use a moment node and send the output to the dashboard ?

Thank you @TotallyInformation and @bakman2 for your inputs.
My data has the form '2019-11-29T00:00:00' and your commands

console.log(new Date('2019-11-29T00:00:00'))
console.log( (new Date('2019-11-29T00:00:00')).getMonth() )

works perfect.
Now with the command

<th><script>test();</script></th>

I was able to call my function. But I don't get a return value from the function. What I did wrong? My full test code wich I test it with this link:

<!DOCTYPE html>
<html>
<body>

<h2>My First JavaScript</h2>


 <script>
function test()	{
	var d = new Date('2019-11-10T00:00:00').getMonth();
        // document.write(d);         
    console.log(d);
    return d;
}
</script> 


<table>
	<tr>
    	<th>abc</th>
        <th><script>test();</script></th>
    <tr>   
    
    
   
</table>

</body>
</html> 

The command

document.write();

works with this link. But in my Node Red Dashboard it creats a new empty site with the output but my gauge, charts,... aren't present.

@bakman2:
The moment node is a good idea. I get do full not only one cell in the table but diverse data wich a riceive in the json-format. And so I thought do this with javascript.

has nobody an idea?:fearful:

You didn't really pay full attention to what I wrote before. I suggest checking your code against mine.

We aren't paid support you know and it happens to be the weekend.

Sorry, It wos only a open question and not a critic.
Find it great if your expert helps us lend for free.
I am a beginner and unfortunately I do not understand everything at the begin and not everthink work at the begin... Sorry.

OK, just check your code against mine to see the difference which should let you correct your issues.

@TotallyInformation:
Thank you for your helpfulness!

Yes, I know, that the two code are different. With your code I saw that the function "myfunction" isn't called. I don't know what i do wrong...
The commands

console.log(new Date('2019-11-29T00:00:00'))
console.log( (new Date('2019-11-29T00:00:00')).getMonth() )

works.
I don't know how I can call a function in a table (cell) and get the return value in the cell....
This not work, too:

<th>{{new Date('2019-11-29T00:00:00')}}</th>

Full test code that does't work:

<!DOCTYPE html>
<html>
<body>

<h2>My First JavaScript</h2>


 <script>
function test()	{
	var d = new Date('2019-11-10T00:00:00').getMonth();
        // document.write(d);         
    console.log(d);
    return d;
}
</script> 


<table>
	<tr>
    	<th>abc</th>
        <th>{{new Date('2019-11-29T00:00:00').getMonth()}}</th>
    <tr>   
    
    
   
</table>

</body>
</html> 

Thank you so much for your assistance!

Like I've probably said, I really don't use Angular any more as it is too painful.

But a quick online search gave the answer:

https://www.startpage.com/do/dsearch?query=angular+1+show+results+of+function

Of course, using that with Dashboard isn't so easy but my blog has some clues:

Putting that together:

<div>
    {{test(msg.payload)}}
</div>

<script>
    // Lambda function to access the Angular Scope
    ;(function(scope) {
        scope.test = function(date) {
            return new Date().getMonth()
        }
    })(scope)
</script>

And now you know why I wrote uibuilder :grinning:

1 Like

@TotallyInformation:
Thank you so much for your help.:wink::sunglasses:
I will read your inputs a try to realize it.

Might it be easier to determine the date in node-red and pass that to the dashboard?

1 Like

@Colin:
Thank you for your input!
Yes that' true.
But:
I have a table which is filled with data from a website (json format).
How can I add the calculated values ​​(in node red) in this table?

Where there's JSON and Node-RED, you already have a solution :grinning:

JSON is processable directly by JavaScript so where you have the little function to get the month, you can simply add the month to the msg object in Node-RED. In a function node for example:

const d = new Date(msg.payload.daytime)

msg.payload.month = d.getMonth()

return msg

@Colin @TotallyInformation @bakman2:
Thank you so much for your inputs.
I thought too complicated.
Thank you @TotallyInformation for your super example! It works!!!
I'm happy! :sunglasses: :cowboy_hat_face: