Define Matdatepicker component format

Asked

Viewed 275 times

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:

  1. What is the best solution to avoid errors?
  2. I can change component typing to receive a Timestamp instead of a Date 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.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.