How to fix err InvalidPipeArgument for date?

Question

I tried to display date in specific format by pipe date then I got this error:

Uncaught Error: InvalidPipeArgument: 'Unable to convert "25/01/2019" into a date' for pipe 'e'
    at Xe (main.fc4242d58c261cf678ad.js:1)
    at e.transform (main.fc4242d58c261cf678ad.js:1)
    at main.fc4242d58c261cf678ad.js:1
    at main.fc4242d58c261cf678ad.js:1
    at es (main.fc4242d58c261cf678ad.js:1)
    at Cs (main.fc4242d58c261cf678ad.js:1)
    at Object.updateRenderer (2.afd83a5d88a3f927f011.js:1)
    at Object.updateRenderer (main.fc4242d58c261cf678ad.js:1)
    at $a (main.fc4242d58c261cf678ad.js:1)
    at us (main.fc4242d58c261cf678ad.js:1)

I received date info from API with string "25/01/2019" then I display on html like this:

{{ item.date | date: 'dd MMM yyyy' }}

I don't know I did some mistakes or not. But, What I want to do is display date in another format and date input is string type.

Can I do it? if yes what is the way in this case? Thanks a lot.

note: this error is not happen on localhost. at my localhost it is still working well. I met this when I deploy my web app to real environment.

[Have you kept something similar in your component.ts](https://stackblitz.com/edit/angular-wwoall?file=src%2Fapp%2Fapp.component.html) — Sourav Dutta, Apr 12 '19 at 07:26
Please try follwing ``{{ item.date | async | date:'dd MMM yyyy' }}`` , using ``async`` pipe is needed as long as you grab info from an API — Abdulrahman Falyoun, Apr 12 '19 at 07:31
thank you for your support. I think the problem is it is not a ISO string. — Hoang Subin, Apr 17 '19 at 03:12

score 2 · Accepted Answer · answered Apr 12 '19 at 07:53

2

The doc says

The date expression: a Date object, a number (milliseconds since UTC epoch), or an ISO string

25/01/2019 is not an ISO string, 2019-01-25 is. NB : there are other date pipes outside the angular common package or you can make your on.

answered Apr 12 '19 at 07:53

David Palita

1,193
9
12

score 0 · Answer 2 · answered Apr 12 '19 at 08:07

An addition to @David Palita's answer,

First you should convert from String to Date, then your can use DatePipe as you mentioned,

item.date = parseDate(item.date, 'dd/mm/YYYY');

If you reproduce your issue on stackblitz, we can make better directions for your case.

I also recommend you to check this SO question.

How to fix err InvalidPipeArgument for date?

note: this error is not happen on localhost. at my localhost it is still working well. I met this when I deploy my web app to real environment.

2 Answers2