How to set the format of the DatePicker component in Angle 6.
In my Angular 6 app, I'm working with the Cloud Firestore database of Firebase . When performing a document query, when the document has a field of type Timestamp
returning a date, it does not load the date in the DatePicker component and then does not appear on the screen.
Since the DatePicker component waits for an object of type Date
and not an object of type Timestamp
, it is not loaded in the component and does not appear on the screen.
Is there a way to type this component to receive an object of type Timestamp
instead of an object of type Date
?
form.component.html:
<mat-form-field class="mr-sm-24" fxFlex>
<input matInput [matDatepicker]="startDatePicker" formControlName="startDate" placeholder="Data de ínicio">
<mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
<mat-datepicker #startDatePicker></mat-datepicker>
</mat-form-field>
form.component.ts:
import { Todo } from 'app/main/gerenciamento/todo/todo.model';
todo: Todo;
createTodoForm(): FormGroup {
return this._formBuilder.group({
'id': [this.todo.id],
'title': [this.todo.title],
'notes': [this.todo.notes],
'startDate': [this.todo.startDate],
'dueDate': [this.todo.dueDate],
'completed': [this.todo.completed],
'starred': [this.todo.starred],
'important': [this.todo.important],
'deleted': [this.todo.deleted],
'tags': [this.todo.tags],
'tagList': [this.todo.tagList]
});
}
todo.model.ts:
export class Todo {
id: string;
title: string;
notes: string;
startDate: string;
dueDate: string;
completed: boolean;
starred: boolean;
important: boolean;
deleted: boolean;
tags: {};
tagList: [
{
'id': number,
'name': string,
'label': string,
'color': string
}
];
/**
* Constructor
*
* @param todo
*/
constructor(todo) {
{
this.id = todo.id;
this.title = todo.title;
this.notes = todo.notes;
this.startDate = todo.startDate && todo.startDate.toDate();
this.dueDate = todo.dueDate && todo.dueDate.toDate();
this.completed = todo.completed;
this.starred = todo.starred;
this.important = todo.important;
this.deleted = todo.deleted;
this.tags = todo.tags || {};
this.tagList = todo.tagList || [];
}
}
In the model I'm having to call the toDate()
function because the return from the Cloud Firestore is a Timestamp
instead of a Date
, and I need the Date object because the component does not accept a value of type Timestamp
.
It turns out that not all documents have the field with date filled, so when loaded and called the function toDate()
error occurs because it comes with null
.
Before the updates I made to the dependencies of package.json
of NodeJS, the returned value was an object of type Date
, now it is returning a Timestamp
object.
Expected solution:
Timestamp
instead of Date
by default?