Angular Material 日期选择器的最小值和最大值不起作用：类型 'Date' 不可分配给类型 'number'

Question

我在 Angular 11 中使用 material 日期选择器（具体版本见下文），我在 min/max 属性方面遇到问题。

我的-component.component.html

<form [formGroup]="form">
    <mat-form-field>
        <mat-label>Date</mat-label>
        <input [matDatepicker]="picker"
          [max]="maxDate"
          [min]="minDate"
          formControlName="date"
          matInput>
        <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
</form>

我的-component.component.ts

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
})
export class MyComponent implements OnInit {

  minDate = new Date();
  maxDate = new Date();
  form!: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.createForm();
  }

  private createForm(): FormGroup {
    return this.formBuilder.group({
      date: [],
    });
  }

我的问题是，当我运行 ng serve:

时，我的 IDE (Webstorm 2020.03) 显示以下错误

Error: src/app/my-component.component.html:197:55 - error TS2322: Type 'Date' is not assignable to type 'number'.
    
    4                       <input [matDatepicker]="picker" [max]="minDate"
                                                              ~~~~~~~~~~~~~~~
    
      src/app/my-component.component.ts.ts:18:16
        5   templateUrl: './my-component.component.html',
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component MyComponent.
    src/app/my-component.component.html:198:30 - error TS2322: Type 'Date' is not assignable to type 'number'.
    
    5                              [min]="minDate"
                                     ~~~~~~~~~~~~~~~
    
      src/app/my-component.component.ts.ts:18:16
        5   templateUrl: './my-component.component.html',
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component MyComponent.

如果删除 [max]="maxDate" [min]="minDate" 或 formControlName="date"，我可以毫无错误地提供应用程序。然后，如果我再次添加它，IDE 会显示错误，但一切都按预期进行。当我删除 formControlName="date" 时，min/max 属性正常工作，但值不是表单中设置的日期。我尝试将 minDate 和 maxDate 设置为 new Date().getTime()。这解决了编译器问题，但 min/max 属性不再起作用。

这些是我正在使用的模块：

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {MyComponent} from './my-component.component';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {ReactiveFormsModule} from '@angular/forms';
import {CustomFormsModule} from 'ng2-validation';



@NgModule({
  declarations: [MyComponent],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    CustomFormsModule,
  ],
})
export class MyModule {
}

版本：

Angular CLI: 11.0.6
Node: 14.15.3
OS: win32 x64

Angular: 11.0.8
... common, compiler, compiler-cli, core, forms, localize
... platform-browser, platform-browser-dynamic, router
... service-worker
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.6
@angular-devkit/build-angular   0.1100.6
@angular-devkit/core            11.0.6
@angular-devkit/schematics      11.0.6
@angular/animations             11.0.9
@angular/cdk                    11.1.2
@angular/cli                    11.0.6
@angular/material               11.1.2
@schematics/angular             11.0.6
@schematics/update              0.1100.6
rxjs                            6.6.3
typescript                      4.0.5

我怎样才能让它正常工作？

更新：我在 stackblitz 上创建了一个应用程序：https://stackblitz.com/edit/angular-datepicker-min-max-error?file=src/app/datepicker-min-max-example.html 但是，即使我在 Webstorm 中下载并运行它，该问题也不会出现在该简化版本中。我认为，这里发生的是使用 node_modules/@angular/forms/forms.d.ts 而不是 node_modules/@angular/material/datepicker/date-range-input.d.ts 的 min 和 max 指令。两人同名

Answer 1

赋值的时候可以给日期传值吗？类似于：

 minDate = new Date(2000, 0, 1);
 maxDate = new Date(2020, 0, 1);

希望对您有所帮助。谢谢。

Answer 2

我找到了罪魁祸首。仅当我从模块中的 'ng2-validation' 导入 CustomFormsModule 时才会出现问题。一旦我删除它，就会使用正确的 min/max 指令并且不再显示错误。

Angular Material 日期选择器的最小值和最大值不起作用：类型 'Date' 不可分配给类型 'number'

Angular Material Datepicker min and max not working: Type 'Date' is not assignable to type 'number'

datepicker

typescript

angular-material

angular