Format date with angular2 moment

Question

I'm getting following error, when using amTimeAgo pipe from angular2-moment.

Deprecation warning: value provided is not in a recognized RFC2822 or ISO format.
moment construction falls back to js Date(), which is not reliable across all browsers and versions.
Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release.
Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.
Arguments: [0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: 21-03-2017, _f: undefined, _strict: undefined, _locale: [object Object]

Also pipe is printing Invalid date.

I'm using it like this: <span class="date-created"> {{ job.createdAt | amTimeAgo }} </span>

And value of job.createdAt is string in format: 22-03-2017.

I understand that something is wrong with format, but don't know how to pass that custom format ('DD-MM-YYYY') to pipe, so that moment package and this angular library can recognize it.

Any ideas?

A custom pipe for relative time is here. Have a look at this [**post**](http://stackoverflow.com/questions/41528844/custom-pipe-filter-for-calculating-relative-time-in-angular2) — Aravind, May 20 '17 at 22:06

score 3 · Answer 1 · edited May 20 '17 at 17:03

3

I guess, the string is not being correctly converted to date.. you can try below two options:

{{job.createdAt |  date:'MM/dd/yyyy' | amTimeAgo }}

or convert the string to date in your typescript file:

let newDate = new Date(job.createdAt);

edited May 20 '17 at 17:03

Preview

35,317
10
92
112

answered May 20 '17 at 17:02

Lambo14

231
1
6

For some reason, it didn't work with pipe. I had to parse it using momentjs first. thanks! – Ned May 26 '17 at 21:02

Batajus · Accepted Answer · 2017-05-20T17:01:01.127

0

What about creating a new moment object to pass it into the pipe, like:

let newMomentObj = moment(job.createdAt, 'DD-MM-YYYY');

and in your html file:

<span class="date-created"> {{ newMomentObj | amTimeAgo }} </span>

edited May 20 '17 at 17:01

answered May 20 '17 at 16:55

Batajus

5,831
3
25
38

score 0 · Answer 3 · answered Jun 20 '17 at 14:18

angular2-moment introduced from version 1.4.0 amParse pipe that:

Parses a custom-formatted date into a moment object that can be used with the other pipes

In your case, you can do something like the following:

<span class="date-created"> {{ job.createdAt | amParse:'DD-MM-YYYY' | amTimeAgo }} </span>

this way you can parse your date string directly in your view.

Format date with angular2 moment

3 Answers3