Formatting a date with Angular inside a Template table

General
1

I was hoping to format a date inside a table in the Template node using the following code:

<td>{{msg.payload[$index].alarm_date | date: 'MMM d, y H:mm:ss' : '+1200' }}</td>

The part of the code that does NOT work is timezone change...'+1200', as it appears the timezone filter is no longer support in Angular.

Can someone point me in the direction of a workaround that can be used in the Template node?

Thanks

2

The Angular v1.7.x docs DO confirm that the timezone option is supported on the date filter.
This is also confirmed within the live 'plunker' sample linked from the docs... so i guess the next question would be what version of Angular is being loaded into your browser?

If this will not work, you can manipulate the raw data before sending it to the ui_template node. You may have to pass your msg object through the node-red-contrib-moment node, set up to convert the alarm_date field to a human-readable string in the desired timezone. Another option is to change your query to return the date as a string (assuming your array is generated by some database query).

3

Thanks @shrickus for your helpful tips.

I am currently exploring your third suggestion re using a sql query to convert the date. This looks to be a winner.

The browser is running v1.7.7 so that being the case the Angular filter should work, but doesn't for me. As much as I would like to know why I don't have the resources to spend finding out.

I also considered your second suggestion before but couldn't work out how to use the Moment node with an array of objects, which is what the input would be. Presumably this would require using moment.js inside a Function node to achieve, or am I missing something obvious?

Thanks

4

The moment node currently only supports a single value I'm afraid.

Doubtless it could be changed without too much problem but I'm a little pushed for time at the moment (no pun intended!) so I'm not sure when I could get to it. I'd be happy to accept a Pull Request though if someone else wanted a crack at it. The code is well commented.

5

For me this simple template is working

<div>
    <table><tr>
      <td>{{msg.payload | date: 'MMM d, y H:mm:ss' : '+0400' }}</td>
    </tr></table>
</div>

giving me
image
(when it is 10:05 UK BST) - flow below

[{"id":"1eabfb2a.faec45","type":"inject","z":"439238bf.9f6608","name":"","topic":"","payload":"","payloadType":"date","repeat":"10","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":940,"wires":[["34af3509.d26baa","91580bf1.ed9398","8b742d7.4ea64d"]]},{"id":"8b742d7.4ea64d","type":"ui_template","z":"439238bf.9f6608","group":"8e4ee977.8c5d28","name":"test2","order":2,"width":0,"height":0,"format":"<div>\n    <table><tr>\n      <td>{{msg.payload | date: 'MMM d, y H:mm:ss' : '+0400' }}</td>\n    </tr></table>\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":330,"y":1020,"wires":[[]]},{"id":"8e4ee977.8c5d28","type":"ui_group","z":"","name":"Default","tab":"e6777ecd.b6d0f","disp":true,"width":"9","collapse":false},{"id":"e6777ecd.b6d0f","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
6

Stranger things. @dceejay, your example works fine. The issue, if there is one, I now think relates to the date output from a ui_form to the MariaDB sql input. All appears working now without the use of the timezone filter but I will try to break it just to make sure, as I'm still not totally convinced and don't like mysteries.

One thing is for certain, date/times can be tricky even when you try to KISS. :thinking:

Thanks all for your input.

7

What I usually do is put a split node before and a join node after the moment node -- granted, not the most efficient, but it works... as long as there are not other msg properties that need to be carried along with the data array...