angulartypescriptangular-materialangular-material2angular-material-6

custom native date adapter no longer works since upgrade of Angular/Material from 5 to 6


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?


Solution

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