Skip to content

Instantly share code, notes, and snippets.

@predorock
Last active December 16, 2023 03:27
Show Gist options
  • Save predorock/6a60955b99bdf8e2077a49aadf039ecb to your computer and use it in GitHub Desktop.
Save predorock/6a60955b99bdf8e2077a49aadf039ecb to your computer and use it in GitHub Desktop.
Firestore Timestamp to Angular Material Datepicker date
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment