Datetime-picker: Support for Angular 12 mat-datepicker-toggle

[antonio-spinelli]

Dependencies

...
    "@angular-material-components/datetime-picker": "~6.0.3",
    "@angular/animations": "~12.2.7",
    "@angular/cdk": "~12.2.7",
    "@angular/common": "~12.2.7",
    "@angular/compiler": "~12.2.7",
    "@angular/core": "~12.2.7",
    "@angular/flex-layout": "12.0.0-beta.35",
    "@angular/forms": "~12.2.7",
    "@angular/material": "~12.2.7",
    "@angular/platform-browser": "~12.2.7",
    "@angular/platform-browser-dynamic": "~12.2.7",
    "@angular/router": "~12.2.7",
...

Template

    <mat-form-field>
      <input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date" [formControl]="dateControl" />
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <ngx-mat-datetime-picker #picker></ngx-mat-datetime-picker>
    </mat-form-field>

It gives an error on for of mat-datepicker-toggle

Type 'NgxMatDatetimePicker<any>' is not assignable to type 'MatDatepickerPanel<MatDatepickerControl<any>, any, any>'

[antonio-spinelli]

For now I just bypassed it with this cast trick:

Component

  @ViewChild('picker', { static: true }) pickerFixed?: any

Template

    <mat-form-field>
      <input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date" [formControl]="dateControl" />
      <mat-datepicker-toggle matSuffix [for]="pickerFixed"></mat-datepicker-toggle>
      <ngx-mat-datetime-picker #picker></ngx-mat-datetime-picker>
    </mat-form-field>

[AleksandarTokarev]

@antonio-spinelli i am still getting this error? Any idea what else need to be changed?

If i set "strictTemplates": false, then this error goes away, but i guet another one

core.js:6479 ERROR TypeError: this._datepicker._registerInput is not a function
    at NgxMatDatetimeInput.set ngxMatDatetimePicker [as ngxMatDatetimePicker]

Thanks a lot for the help

[antonio-spinelli]

@antonio-spinelli i am still getting this error? Any idea what else need to be changed?

If i set "strictTemplates": false, then this error goes away, but i guet another one

core.js:6479 ERROR TypeError: this._datepicker._registerInput is not a function
    at NgxMatDatetimeInput.set ngxMatDatetimePicker [as ngxMatDatetimePicker]

Thanks a lot for the help

this is my tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

[OneOffLethal]

Stumbled across this problem here first and didn't find any success with viewchild - found this solution: <mat-datepicker-toggle matSuffix [for]="$any(picker)"></mat-datepicker-toggle> https://stackoverflow.com/questions/64826483/ngxmatdatetimepicker-is-not-assignable-to-type-matdatepickerbase

Also in case anyone else fell into this pitfall: Can't bind to 'htmlFor' since it isn't a known property of 'mat-datepicker-toggle'. You may be forgetting MatDatepickerModule in app.module imports. Not all the docs say to put it in.

[avzard]

Stumbled across this problem here first and didn't find any success with viewchild - found this solution: <mat-datepicker-toggle matSuffix [for]="$any(picker)"></mat-datepicker-toggle> https://stackoverflow.com/questions/64826483/ngxmatdatetimepicker-is-not-assignable-to-type-matdatepickerbase

Also in case anyone else fell into this pitfall: Can't bind to 'htmlFor' since it isn't a known property of 'mat-datepicker-toggle'. You may be forgetting MatDatepickerModule in app.module imports. Not all the docs say to put it in.

i am facing the htmlFor issue even with all imports in place https://github.com/h2qutc/angular-material-components/issues/380