Question

我正在尝试使用下面提到的Angular Material datepicker获取日期，

在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>

在app.module.ts

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

imports: [
  MatDatepickerModule,
  MatNativeDateModule
],

在我的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

您可能会缺少startView和/或[startAt]属性，这是Angular文档建议的在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>

Answer 3

我在角度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 4

从'@ angular / material / icon'导入{MatIconModule};

尝试

Answer 5

这是解决我问题的方法。我只运行下面的代码，现在一切都按预期工作了，

ng add @angular/material

Answer 6

在我的情况下，日期选择器覆盖图的z索引过高（奇怪），这意味着对日期选择器的任何单击实际上只是在覆盖图上单击。降低z-index可以解决问题：

.cdk-overlay-backdrop {
    z-index: 100; //instead of z-index: 1031;
}

Answer 7

同时导入此链接：

import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';

Angular Material Date-Picker无法正常工作

7 个答案: