Adaptador para un selector de fechas en Angular

Firebase entrega TimeStamps, no fechas, por lo que toca hacer la conversión respectiva. Pero es posible implementar una directiva que resuelva este problema así:

import { Directive, HostListener } from '@angular/core';
import { NgModel } from '@angular/forms';
import * as firebase from 'firebase';

@Directive({
  selector: '[appFirestoreDatepickerAdapter]',
  providers: [NgModel],
})
export class FirestoreDatepickerAdapterDirective {

  constructor(
    private model: NgModel
  ) { }

  @HostListener('ngModelChange', ['$event'])
  parse(ev): void {
    if (ev instanceof firebase.firestore.Timestamp) {
      this.model.valueAccessor.writeValue(ev.toDate());
    }
  }
}

<mat-form-field appearance="fill">
  <mat-label>Date</mat-label>
  <input appFirestoreDatepickerAdapter matInput [matDatepicker]="myDateDatepicker" formControlName="myDate" id="myDate">
  <mat-datepicker-toggle matSuffix [for]="myDateDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #myDateDatepicker ></mat-datepicker>
</mat-form-field>

Deja una respuesta