# Formatting a date with Angular inside a Template table

**URL:** <https://discourse.nodered.org/t/formatting-a-date-with-angular-inside-a-template-table/11621>\
**Category:** General\
**Created:** [28 May 2019 02:46 UTC](https://discourse.nodered.org/t/formatting-a-date-with-angular-inside-a-template-table/11621 "2019-05-28T02:46:31Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [28 May 2019 02:46 UTC](https://discourse.nodered.org/t/formatting-a-date-with-angular-inside-a-template-table/11621/1 "2019-05-28T02:46:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [28 May 2019 16:41 UTC](https://discourse.nodered.org/t/formatting-a-date-with-angular-inside-a-template-table/11621/2 "2019-05-28T16:41:24Z")

</div>

The [Angular v1.7.x docs](https://docs.angularjs.org/api/ng/filter/date) 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).

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [29 May 2019 08:12 UTC](https://discourse.nodered.org/t/formatting-a-date-with-angular-inside-a-template-table/11621/3 "2019-05-29T08:12:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [29 May 2019 08:23 UTC](https://discourse.nodered.org/t/formatting-a-date-with-angular-inside-a-template-table/11621/4 "2019-05-29T08:23:59Z")

</div>

> [@Bobo](#):
>
> 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

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.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [29 May 2019 09:08 UTC](https://discourse.nodered.org/t/formatting-a-date-with-angular-inside-a-template-table/11621/5 "2019-05-29T09:08:19Z")

</div>

For me this simple template is working

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

```

giving me  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d050f2c38272ac62b5a1af76e5b1023c65eeca8a.png)  
(when it is 10:05 UK BST) - flow below

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [30 May 2019 10:21 UTC](https://discourse.nodered.org/t/formatting-a-date-with-angular-inside-a-template-table/11621/6 "2019-05-30T10:21:43Z")

</div>

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. 🤔

Thanks all for your input.

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [30 May 2019 16:06 UTC](https://discourse.nodered.org/t/formatting-a-date-with-angular-inside-a-template-table/11621/7 "2019-05-30T16:06:18Z")

</div>

> [@Bobo](#):
>
> Presumably this would require using moment.js inside a Function node to achieve, or am I missing something obvious?

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