CustomeDateAdapter in Angular Material 6

Question

I have implemented a CustomDateAdapter as described here: https://medium.com/@esanjiv/working-with-custom-dateadapter-for-angular-material-2-datepicker-76d4446277dc

Now, I am doing the Angular Material 6 migration and I get the following error

core.js:1598 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'TRIDENT' of undefined
TypeError: Cannot read property 'TRIDENT' of undefined
at CustomDateAdapter.NativeDateAdapter [as constructor] (core.es5.js:792)
at new CustomDateAdapter (custom-date-adapter.ts:21)
at _createClass (core.js:9262)
...

core.es5.js line 792 is this:

_this.useUtcForDisplay = !platform.TRIDENT;

It seems that the platform is undefined.

I noticed that the constructor of the NativeDateAdapter has changed in Material 6, it also requires a platform as input.

constructor(matDateLocale: string, platform: Platform);

What I am missing? How can I implement a CustomDateAdapter in Angular Material 6?

Answer 1

I had the same problem. Here is my fix.

// in your shared or main.module.ts
// … other imports
import {Platform, PlatformModule} from '@angular/cdk/platform';

@NgModule({
  imports: [
    // …
    PlatformModule
  ],
  exports: [
    // …
    PlatformModule
  ],
  providers: [
    {provide: DateAdapter, useClass: YourCustomDateAdapter, deps: [MAT_DATE_LOCALE, Platform]},
  ]
 });
 export class SharedModule {
}

And you haven't override the YourCustomDateAdapter's constructor.

Answer 2

I solved this problem by instantiating in my code a Platform object

export class CustomDateAdapter extends NativeDateAdapter {

  constructor(matDateLocale: string) {
    super(matDateLocale, new Platform());
  }

...

}

Another option is to provide it with a factory

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [
    {
      provide: Platform,
      useFactory: platformProviderFactory,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

export function platformProviderFactory() {
  return () => new Platform();
}