Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

NgxMatDatetimePicker is not assignable to type MatDatepickerBase

Today I created a new Angular project using Angular 11.0.0. I then installed @angular-material-components/datetime-picker and this is part of what reads in my package.json file:

...
"@angular/core": "~11.0.0",
"@angular/material": "^11.0.0",
"@angular/animations": "~11.0.0",
...
"@angular-material-components/datetime-picker": "^4.0.5",
...

All my code works well except in my HTML where I define mat-datepicker-toggle referring to ngx-mat-datetime-picker. I get the following error:

error TS2322: Type 'NgxMatDatetimePicker<any>' is not assignable to type 'MatDatepickerBase<MatDatepickerControl<any>, any, any>'.

Here is my HTML code:

<input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date"
         formControlName="scheduledStartDateTime" 
         [min]="minDate" 
         (dateChange)="dateUpdated()" >
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #picker [showSpinners]="true" [showSeconds]="false"
                           [stepHour]="1" [stepMinute]="1" [stepSecond]="1"
                           [touchUi]="false" [enableMeridian]="false"
                           [disableMinute]="false" [hideTime]="false">
</ngx-mat-datetime-picker>

I can disable Angular from flagging this validation error (and have my project run fine) by changing this property in the tsconfig.json file:

"angularCompilerOptions": {
    ...
    "strictTemplates": false
}

However, I would like to have the validation benefits by having "strictTemplates": true.

Am I missing something or can you guys please let me know when this bug gets fixed?

like image 634
Manuel Hernandez Avatar asked Nov 13 '20 18:11

Manuel Hernandez


People also ask

Is there a matdatepicker provider for dateadapter?

javascript - MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule - Stack Overflow

Why is my ngxmatdatetimepicker number 65 and 89?

I guess the cause of #65 and #89 are the @angular/material^10.0.0 changes around the new DateRangePicker. The MatDatepicker now extends MatDatepickerBase, which (I guess) NgxMatDatetimePicker should do to. But I'm not sure, just skimmed the code a bit .. :) Sorry, something went wrong.

What to do if matdatepicker is not available?

ERROR Error: MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a custom implementation. Attention: For newer Angular versions you only need to import one module:

What does the timepicker set the value of the input to?

Setting 11:30 PM using the timepicker UI would set the value of the <input> to 23:30 on the UI. Setting 11:30 PM using the timepicker UI sets the value of the <input> to 11:30 on the UI.


1 Answers

in this case you have to disable strict template checking explicitly, you can make use of the $any() template function:

<input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date"
       formControlName="scheduledStartDateTime" 
       [min]="minDate" 
       (dateChange)="dateUpdated()" >
<mat-datepicker-toggle matSuffix [for]="$any(picker)"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #picker [showSpinners]="true" [showSeconds]="false"
                         [stepHour]="1" [stepMinute]="1" [stepSecond]="1"
                         [touchUi]="false" [enableMeridian]="false"
                         [disableMinute]="false" [hideTime]="false">
</ngx-mat-datetime-picker>
like image 177
alexnavratil Avatar answered Oct 19 '22 12:10

alexnavratil