Angular Material Date-Picker 无法正常工作答案

【问题标题】：Angular Material Date-Picker is not working properlyAngular Material Date-Picker 无法正常工作
【发布时间】：2020-02-15 02:32:18
【问题描述】：

我正在尝试使用 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", “角垫日期选择器”：“0.0.2”， “角度材料日期选择器”：“^1.0.2”，
"hammerjs": "^2.0.8", "ng-material-datetimepicker": "^1.19.2",
},

但是日期选择器图标不起作用，甚至图标也没有显示在视图中。我也更新了 Angular 材质版本，但是没有用。这个问题有什么解决办法？

【问题讨论】：

尝试导入mat-icon模块
从'@angular/material/icon'导入{MatIconModule}；
现在图标正在工作，但正如我上面提到的，占位符不起作用，日历也显示但无法按预期正常工作

标签： angular angular-material

【解决方案1】：

您还必须导入 MatFormFieldModule 和 MatInputModule 才能使其正常工作。

别忘了导入BrowserAnimationsModule。看看这个StackBlitz

【讨论】：

现在图标正常工作，但正如我上面提到的，占位符不起作用，日历也显示但无法正常工作
如果你删除 mat-label 它会。结帐：material.angular.io/components/form-field/…
<mat-form-field> <input matInput [matDatepicker]="picker" placeholder="Choose a date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field>我改成这样也不行
对不起，之前我误解了你的顾虑。您能否指出每个部分的问题：占位符、日历的行为等。
日历正在显示，但它的视图显示不正确，并且占位符根本不工作

【解决方案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>

【讨论】：

[startAt]="startDate" 与我的朋友无关。

【解决方案3】：

我在 Angular 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);
}

}

【讨论】：

什么是@ViewChild(MatDatepicker) picker: MatDatepicker<Moment>;
我曾经在父组件中访问子组件。另外，我已经通过了 Moment，因为我的工作需要一个时刻日期对象。请忽略它。

【解决方案4】：

从“@angular/material/icon”导入 {MatIconModule}；

试试这个

【讨论】：

【解决方案5】：

这是我的问题的解决方案。我只是运行下面的代码，现在一切正常，如我所料，

ng add @angular/material

【讨论】：

【解决方案6】：

在我的情况下，日期选择器覆盖的 z-index 太高了（奇怪的是），这意味着对日期选择器的任何点击实际上只是点击了覆盖。降低它的 z-index 解决了这个问题：

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

【讨论】：

【解决方案7】：

同时导入此链接：

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

【讨论】：