I had a custom date adapter in my Angular 5 app:
import {NativeDateAdapter} from "@angular/material";
import {Injectable} from "@angular/core";
@Injectable()
export class CustomDateAdapter extends NativeDateAdapter {
parse(value: any): Date | null {
if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
const str = value.split('/');
return new Date(Number(str[2]), Number(str[1])-1, Number(str[0]), 12);
}
const timestamp = typeof value === 'number' ? value : Date.parse(value);
return isNaN(timestamp) ? null : new Date(timestamp);
}
format(date: Date, displayFormat: Object): string {
return date.getFullYear() + "-" + (date.getMonth() + 1).toString().padStart(2, '0') + "-" + date.getDate().toString().padStart(2, '0');
}
}
defined in app.module.ts
@NgModule({
imports: [...],
declarations: [...],
providers: [
...,
{ provide: DateAdapter, useClass: CustomDateAdapter }
],
bootstrap: [
AppComponent
]
})
export class AppModule {}
It worked fine, but then it stopped when upgraded Angular/Material to version 6. This is the error I'm getting now:
ERROR TypeError: Cannot read property 'TRIDENT' of undefined
at new NativeDateAdapter (native-date-adapter.ts:83)
at new CustomDateAdapter (custom.date.adapter.ts:5)
at _createClass (ng_module.ts:171)
at _createProviderInstance$1 (ng_module.ts:143)
at resolveNgModuleDep (ng_module.ts:104)
at NgModuleRef_.get (refs.ts:502)
at resolveDep (provider.ts:416)
at createClass (provider.ts:276)
at createDirectiveInstance (provider.ts:135)
at createViewNodes (view.ts:303)
I came across a similar issue CustomeDateAdapter in Angular Material 6 and tried a recommended fix including constructor
constructor(matDateLocale: string) {
super(matDateLocale, new Platform());
}
now it produces following error:
ERROR Error: StaticInjectorError(AppModule)[DateAdapter -> String]:
StaticInjectorError(Platform: core)[DateAdapter -> String]:
NullInjectorError: No provider for String!
at NullInjector.get (injector.ts:35)
at resolveToken (injector.ts:332)
at tryResolveToken (injector.ts:274)
at StaticInjector.get (injector.ts:154)
at resolveToken (injector.ts:332)
at tryResolveToken (injector.ts:274)
at StaticInjector.get (injector.ts:154)
at resolveNgModuleDep (ng_module.ts:124)
at _createClass (ng_module.ts:173)
at _createProviderInstance$1 (ng_module.ts:143)
Any idea how to make it work again?
I solved it with using MomentDateAdapter
and a custom date format.
import {NgModule} from "@angular/core";
import {AppComponent} from "./app.component";
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from "@angular/material";
import {MomentModule} from "ngx-moment";
import {MomentDateAdapter} from '@angular/material-moment-adapter';
export const ISO_FORMAT = {
parse: {
dateInput: 'LL',
},
display: {
dateInput: 'YYYY-MM-DD',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
};
@NgModule({
imports: [
MomentModule,
...
],
declarations: [
AppComponent,
...
],
providers: [
{provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
{provide: MAT_DATE_FORMATS, useValue: ISO_FORMAT},
...
],
bootstrap: [
AppComponent
]
})
export class AppModule {}