I'm using a material date picker in Angular 11 (exact versions see below) and I'm having trouble with the min/max attributes.

**my-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>

```

**my-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: [],
    });
  }

```

My problem is, that my IDE (Webstorm 2020.03) shows the following errors, when I run `ng serve`:

```
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.

```

I can serve the application without any errors, if I remove either `[max]="maxDate" [min]="minDate"` or `formControlName="date"`. Then, if I add it again, the IDE shows the errors, but everything works as intended.
When I remove `formControlName="date"`, the min/max attributes work correctly, but the value is not date set in the form.
I tried setting `minDate` and `maxDate` to `new Date().getTime()`. This resolves the compiler issues, but the min/max attributes don't work any more.

These are the modules I'm using:

```
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 {
}

```

Versions:

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

```

How can I make it work without any errors?

Update: I created an app on stackblitz: <https://stackblitz.com/edit/angular-datepicker-min-max-error?file=src/app/datepicker-min-max-example.html>
However, the problem does not occur in that simplified version, even if I download it and run it in Webstorm.
I think, what is happening here, is that the min and max directives from `node_modules/@angular/forms/forms.d.ts` instead of `node_modules/@angular/material/datepicker/date-range-input.d.ts` are used. They both have the same name.