In this article I will show how we can use the core angular date filter capabilities to format Date format, Domino data into an Angular.js based application
Introduction
In previous articles I have shown how to create a simple Angular.js application using a notes Domino Data Services feed from a notes database. If we want to add “date” information then we need a way to nicely format it. Using the Angular.js documentation page as reference I will show you how we can do this with Domino data.
Adding dates to our view
When we add a date field to a Domino Data Services feed we get something which is to the human eye pretty “ugly”
And when we add lastModified into our template, it is well, less than appealing….
Adding a formatting function to the template
We can modify the template to use a formatting function by changing up the template slightly and then adding a formatting filter to the application.
In the app.js we add the following
personApp.filter("formatDate", function () { return function (x) { return new Date(x); }; });
And then we reformat the template as such:
<tr ng-repeat="person in people" on-last-repeat> <td>{{person.firstname}}</td> <td>{{person.lastname}}</td> <td class="zipCode">{{person.zip}}</td> <td class="user">{{person.username}}</td> <td class="user">{{person.lastModified | formatDate | date:"dd MMM yyyy" }}</td> <td><a class="btn btn-info" href="#/person/{{person['@unid']}}">Edit</a></td> <td><a class="btn btn-warning" href="#/person/{{person['@unid']}}/delete">Delete</a></td> </tr>
The critical part is {{person.lastModified | formatDate | date:”dd MMM yyyy” }}.
The documentation unfortunately is not clear on this and I found this Stackoverflow example which worked perfectly. http://stackoverflow.com/a/25856275/1171653
The resulting page now looks formatted and much easier to read
Conclusion
I spent which a lot of time failing to achieve this date formatting without doing it the angular way. One quick google (or three) and I had the answer. Do it the angular way and oo look that that nice and simple formatting.
The date format that Domino outputs in the JSON is a standard JavaScript date representation that conforms to ISO 8601. Angular can automatically convert that for you: you don’t need to add the custom filter. Writing {{person.lastModified | date : ‘dd MM yyyy’}} should be sufficient to format it. I’m lazy, so the less typing the better 😉
You know, what I was actually working on had a much more complex filter and i simplified it for the blog. That’s funny and also very obvious, thanks Mark.
People should listen to you 😉