Angular Material Date-Picker не работает должным образом

Question

Я пытаюсь получить дату, используя указатель даты Angular Material, как указано ниже,

In html

<mat-form-field>
<mat-label>Custom calendar color</mat-label>
<input matInput [matDatepicker]="picker2">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2 color="primary"></mat-datepicker>
</mat-form-field>

In app.module.ts

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material';

imports: [
  MatDatepickerModule,
  MatNativeDateModule
],

Inmy package.json

"зависимости": {"@ angular / animations": "^ 8.2.9", "@ angular / cdk": "^ 8.2.3",
"@ angular / core ":" ~ 8.2.0 ",
" @ angular / material ":" ^ 8.2.3 ",
" @ angular / router ":" ~ 8.2.0 "," angular-mat-datepicker ":" 0.0.2 "," angular-material-datepicker ":" ^ 1.0.2 ",
" hammerjs ":" ^ 2.0.8 "," ng-material-datetimepicker ":" ^1.19.2 ",
},

Но значок выбора даты не работает, даже значок не отображается в представлении. Я также обновил версию материала Angular, но это не сработало. Каково решение этой проблемы?

Answer 1

Вы также должны импортировать MatFormFieldModule и MatInputModule, чтобы заставить его работать.

Также не забудьте импортировать BrowserAnimationsModule. Проверьте это StackBlitz

Answer 2

Это решение моей проблемы. Я просто запустил приведенный ниже код, и теперь все работает нормально, как я ожидал,

ng add @angular/material

Answer 3

import {MatIconModule} из '@ angular / material / icon';

попробуйте

Answer 4

Я использовал материал datepicker в угловых 7. Пройдите через это и надеюсь, что это решит вашу проблему.

import {Component, OnInit, ViewChild} from '@angular/core';
import {FormGroup} from '@angular/forms';
import {MatDatepicker} from '@angular/material';

@Component({
selector: 'app-date',
template: `

    <mat-form-field class="demo-full-width margin-top" [formGroup]="group">
        <input matInput [matDatepicker]="picker" (dateChange)="saveRange()"
               formControlName="datePicker" placeholder="Select Date">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

`,
styles: [],
})

export class DateComponent implements OnInit {

group: FormGroup;

constructor() {
}

ngOnInit() {
}

saveRange() {
    console.log(this.group.value);
}

}

Answer 5

Возможно, вам не хватает атрибута startView и / или [startAt], вот как Angular Docs предлагает создать простой указатель даты в вашем html:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>