Currently, I am in the process of developing a Todo application in Angular that utilizes Firestore as the backend. Despite being quite new to Firebase, I am encountering issues when it comes to storing and retrieving dates.
Upon retrieving dates from Firebase and logging them using console.log, I observe an output similar to this: date: _Timestamp { seconds: 1736290800, nanoseconds: 0 }
To convert this into a human-readable format, I recognize the need to access the seconds component and perform a conversion. My attempts at utilizing date.seconds and date.getSeconds() have resulted in errors. The .seconds operation triggers the following error message:
[ERROR] TS2339: Property 'seconds' does not exist on type 'Date'. [plugin angular-compiler]
src/app/pages/todolist/todolist.component.ts:79:47:
79 │ console.log("date: ",todo.deadlineDate.seconds);
Furthermore, date.getSeconds() is not recognized as a valid function.
The form responsible for fetching the data:
<mat-form-field>
<mat-label>Datum</mat-label>
<input matInput [matDatepicker]="picker" formControlName="date"/>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
A glimpse at my interface:
export interface Todo {
id?: string | null;
title?: string | null;
description?: string | null;
category?: string | null;
done?: boolean | null;
dateCreated: Date;
deadlineDate: Date | null;
}
The function employed for retrieval:
getAllTodoItems(): Observable<any> {
return this.firestore.collection('/todo-item').snapshotChanges();
}
Followed by the method calling the aforementioned function:
async getTodoItems(): Promise<void>{
try {
this.firebaseService.getAllTodoItems().subscribe((data) => {
this.todoList = data.map((e: any) => {
const item = e.payload.doc.data();
return { id: e.payload.doc.id, ...item };
})
this.timeStampToDate();
});
} catch (error) {
console.error('Error fetching todo items:', error);
}
}
For posting purposes, here's my post function:
createTodoItem(todo: Todo): Promise<void> {
todo.id = this.firestore.createId();
return this.firestore.doc(`/todo-item/${todo.id}`).set(todo);
}
An issue arises where the date retrieved from Firebase fails to be recognized as a Timestamp object. Attempts to transform the variable into a Timestamp object using Timestamp.fromDate() proved unsuccessful.
Operating within Angular 18 with AngularFirestore, the dates are sourced from user input through MatDatePickerModule and MatNativeDateModule while being stored as Dates within the sent object in Firebase.
If anyone possesses a solution to this problem, I would greatly appreciate your assistance.