Pipe Date Angular "Unable to convert "Timestamp"

Question

I'm trying to use a pipe in angular, specifically the following: {{fechaCreacion | date: 'medium'}} and I get the following error: Unable to convert Timestamp (seconds = 1528157765, nanoseconds = 878000000)" into a date 'for pipe' DatePipe'

This is my registration in Firestore:

When I just leave {{ fechaCreacion }} it shows me the following:

How can I solve that?

I'm using:

Angular 6

"angularfire2": "^5.0.0-rc.10"

"firebase": "^5.0.4",

component.ts

  aviso: any = {};
  id;
  titulo;
  descripcion;
  fechaCreacion;
  categoria;

  constructor( private fs: FirebaseService, private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.id = this.activatedRoute.snapshot.params['id'];
    this.fs.getAvisoObject(this.id).valueChanges().forEach(aviso => {
      this.titulo= aviso.titulo,
      this.descripcion = aviso.descripcion,
      this.fechaCreacion = aviso.fechaCreacion,
      this.categoria = aviso.categoria
    });
  }

component.html

<mat-card class="px-3 px-md-5 py-3 py-md-4 rounded">
    <div class="row no-gutters small pb-2 mb-3 d-flex justify-content-between border-bottom text-muted">
      <div>
        <span>{{ categoria }}</span>
      </div> 
      <div>
        <span>{{ fechaCreacion | date : 'medium' }}</span>
      </div>
    </div>
    <h2 class="font-weight-bold">{{ titulo }}</h2>
    <h5 class="font-weight-light">{{ descripcion }}</h5>
  </mat-card>

service.ts

getAvisoObject(id: string) {
this.avisoObject = this.afs.doc('avisos/' + id);
return this.avisoObject;
}

Answer 1

You have to call toDate() to convert a Firebase Timestamp to a Javascript Date object before your pipe, for example:

{{ creationDate.toDate() | date: 'medium' }}

Answer 2

When dealing with timestamp type data in Firestore (that's your fechaCreacion field in the document shown), the Firestore client libraries will give you a Timestamp type object in response to queries. You need to use this Timestamp to format a date for display in the browser.

Timestamp represents times with nanosecond precision, which involves two integers, which you are seeing on screen. If you want a JavaScript Date object instead, you could use the toDate() method on that Timestamp to convert it, or whatever it is you need to render that on screen.

Answer 3

<ion-col size="4" class="top-center" item-end>
  <ion-label class="second-col second-col-color text-align-right">{{ud.date.toDate() | date: 'dd/MM/yyyy'}}</ion-label>
</ion-col>

Covert it to toDate like : date.toDate()

Answer 4

Timestamp (seconds = 1528157765, nanoseconds = 878000000) is not a valid timestamp. It would be the best if backend would use eg ISO time format insteed of toString()