2
How to define component format Datepicker in Angular 6.
In my Angular 6 application, I am working with the database Cloud Firestore of Firebase. When performing a document query, when the document has a field of type Timestamp
returning a date, does not load the date into the component Datepicker and then is not displayed on the screen.
Since the component Datepicker waits for an object of the type Date
and not an object of the type Timestamp
, so it is not loaded into the component and is not displayed on the screen.
There is a way to type this component to receive a type object Timestamp
rather than an object of the 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.componentts.:
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]
});
}
all-modelts.:
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 || [];
}
}
On the model I’m having to call the function toDate()
, for the return of Cloud Firestore is a Timestamp
instead of a Date
, and I need the Date object because the component does not accept a type value Timestamp
.
It turns out that not all documents have the field with the date filled in, so when loaded and called the function toDate()
error occurs because it comes null
.
Before the updates I made of the dependencies of package.json
of Nodejs, the value returned was an object of type Date
, is now returning an object Timestamp
.
Expected solution:
- What is the best solution to avoid errors?
- I can change component typing to receive a
Timestamp
instead of aDate
by default?
Are you getting a Timestamp string from the database like this string? I had to go through this last week the way I found to solve this was by parsing this string.
– Ivan Antunes