DatePipe is not working correctly in Angular 6

Question

In my Angular application after upgrading from version 5 to 6, this error is occurring when using DatePipe.

I'm saving a Date () object that the mat-date-picker creates in the Cloud Firestore with the name of the date_field, when returned try to show on screen to the user but does not appear.

I checked the database and it is saving correctly, but I can not display it on the screen for the user in the child_name field.

When you try to display the date_field column in mat-table and use DatePipe to format the date error is occurring.

Below is the HTML code:

<ng-container cdkColumnDef="data_nascimento">
   <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Data de nascimento</mat-header-cell>
   <mat-cell *cdkCellDef="let paciente" fxHide fxShow.gt-xs>
      <p class="text-truncate">{{paciente.data_nascimento | date}}</p>
   </mat-cell>
</ng-container>

After upgrading to Angular 6 the following error occurs:

ERROR Error: InvalidPipeArgument: 'Unable to convert "Timestamp(seconds=1531364400, nanoseconds=0)" into a date' for pipe 'DatePipe'
    at invalidPipeArgumentError (common.js:4238)
    at DatePipe.push../node_modules/@angular/common/fesm5/common.js.DatePipe.transform (common.js:5151)
    at checkAndUpdatePureExpressionInline (core.js:10801)
    at checkAndUpdateNodeInline (core.js:11375)
    at checkAndUpdateNode (core.js:11333)
    at debugCheckAndUpdateNode (core.js:11970)
    at debugCheckRenderNodeFn (core.js:11956)
    at Object.eval [as updateRenderer] (PacientesComponent.html:81)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:11948)
    at checkAndUpdateView (core.js:11320)
View_PacientesComponent_10 @ PacientesComponent.html:81
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:12174
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1650
(anonymous) @ core.js:5102
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:4030
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:5102
(anonymous) @ core.js:4938
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:4071
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3927
next @ core.js:4938
schedulerFn @ core.js:3721
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:253
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:191
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:129
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3713
checkStable @ core.js:4040
onHasTask @ core.js:4084
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205
drainMicroTaskQueue @ zone.js:595
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:500
ZoneTask.invoke @ zone.js:485
timer @ zone.js:2054
setTimeout (async)
scheduleTask @ zone.js:2075
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1114
(anonymous) @ zone.js:2090
proto.(anonymous function) @ zone.js:1394
push../node_modules/@firebase/firestore/dist/index.cjs.js.AsyncObserver.scheduleEvent @ index.cjs.js:15061
push../node_modules/@firebase/firestore/dist/index.cjs.js.AsyncObserver.next @ index.cjs.js:15050
push../node_modules/@firebase/firestore/dist/index.cjs.js.QueryListener.raiseInitialEvent @ index.cjs.js:7610
push../node_modules/@firebase/firestore/dist/index.cjs.js.QueryListener.onViewSnapshot @ index.cjs.js:7550
push../node_modules/@firebase/firestore/dist/index.cjs.js.EventManager.onChange @ index.cjs.js:7487
(anonymous) @ index.cjs.js:8572
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
(anonymous) @ zone.js:872
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
PacientesComponent.html:81 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 4, nodeDef: {…}, elDef: {…}, elView: {…}}

score 64 · Accepted Answer · edited Jun 22 '18 at 08:29

64

If you got a field with format Date from firebase you have to convert it with toDate() before your pipe for example:

{{paciente.data_nascimento.toDate() | date: 'dd/MM/yyyy'}}

edited Jun 22 '18 at 08:29

Community

1
1

answered May 20 '18 at 12:24

Annon_MS

836
1
7
9

But my DatePicker field did not display the date because a Timestamp is returned, I need to return a Date () – Luiz Ricardo Cardoso May 20 '18 at 15:09
this function toDate() convert Timestamp format to valid Date, for example Timestamp(seconds=1531605600, nanoseconds=0) will be changed to Sun Jul 15 2018 00:00:00 GMT+0200 (CEST) – Annon_MS May 21 '18 at 01:08
5

I had the same problem and toDate() function did the trick for me with an Angular 6 app using firestore backend! – skiabox May 24 '18 at 21:24
can someone help answer this https://stackoverflow.com/questions/65414341/angular-date-pipe-not-working-how-to-fix ? – earlwaltonluv3462 Dec 22 '20 at 18:57

David · Answer 2 · 2018-06-28T08:10:24.280

You are passing the wrong type of argument. The Date filter accepts Date objects, numbers (number of milliseconds since epoch) and string (see documentation).

I'm not sure what the Timestamp type is, but it looks like it has a seconds property.

Try to get the number of milliseconds since epoch from that object

{{(paciente.data_nascimento.seconds * 1000) | date}}

Or there might be a built in method to get it

Edit Apparently, since you are using Firebase, you can call the built-in toDate method to convert the Firebase object to a plain JS Date object

{{paciente.data_nascimento.toDate() | date}}

score 3 · Answer 3 · answered Jun 22 '18 at 11:52

3

Use toDate() to convert a Firebase Timestamp to a Javascript Date object before your pipe:

{{ paciente.data_nascimento.toDate() | date }}

answered Jun 22 '18 at 11:52

Denes Papp

3,835
3
32
33

score 3 · Answer 4 · answered Sep 02 '18 at 01:08

I was facing the same issue when i was calling Firebase API and displaying data on my app. I fixed it simply by converting Firebase datetime into JavasScript using toDate() function like below -

<mat-cell *matCellDef="let element">{{element.date.toDate() | date}}</mat-cell>

Thanks

score 0 · Answer 5 · answered Feb 13 '20 at 17:48

Angular 6 on wards you have to use a function toDate(). As well as there are so many date pipes available in the Angular official website. You can check the available pipes and documents on this link. for an example I use fullDate pipe. See my code below <h3>Posted By {{blog.author}} • {{blog.published.toDate() | date:'fullDate'}}</h3>.

I hope you will get the answer

DatePipe is not working correctly in Angular 6

5 Answers5