Set MatDatePicker component format

0

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:

  • What is the best solution to avoid errors?
  • I can change the typing of the component to receive a Timestamp instead of Date by default?
  • asked by anonymous 21.07.2018 / 15:57

    0 answers