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?
javascript - MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule - Stack Overflow
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.
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:
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With