bug(material-date-fns-adapter): Wrong option for format method

[tuuling]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

date-fns format() method requires that the options object locale property is a Locale object.

But currently in the adapter implementation a string is passed:

components/src/material-date-fns-adapter/adapter/date-fns-adapter.ts

Line 193 in 39921f4

return format(date, displayFormat, {locale: this.locale});

  format(date: Date, displayFormat: string): string {
    if (!this.isValid(date)) {
      throw Error('DateFnsAdapter: Cannot format invalid date.');
    }

    return format(date, displayFormat, {locale: this.locale});
  }

this.locale is set in the contstructor from MAT_DATE_LOCALE

components/src/material-date-fns-adapter/adapter/date-fns-adapter.ts

Line 55 in 39921f4

constructor(@Optional() @Inject(MAT_DATE_LOCALE) matDateLocale: {}) {

This causes an error:

 RangeError: locale must contain localize property

      at format (../../node_modules/date-fns/format/index.js:382:11)
      at DateFnsAdapter.format (../../node_modules/@angular/material-date-fns-adapter/fesm2020/material-date-fns-adapter.mjs:145:16)
      at MatDatepickerInput._formatValue (../../node_modules/@angular/material/fesm2015/datepicker.mjs:2721:33)

The fix should be similar to how it is solved here:
https://www.npmjs.com/package/ngx-mat-datefns-date-adapter

Where you provide the DateFns locales in a token and then get the correct one in the adabter based on the MAT_DATE_LOCALE value?

Reproduction

Steps to reproduce:
Using
"@angular/material-date-fns-adapter": "^13.0.2"
"@angular/material": "13.0.2",

in NgModule use:

{
            provide: DateAdapter,
            useClass: DateFnsAdapter,
            deps: [MAT_DATE_LOCALE],
        }

Expected Behavior

No error is thrown.

Actual Behavior

Error is thrown.

Environment

• Angular:
• CDK/Material:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):

[tuuling]

Not sure if this is a legit way to solve this or a temp fix but this seems to work:

import { et, enUS } from 'date-fns/locale'
....
{
    provide: DateAdapter,
    deps: [MAT_DATE_LOCALE],
    useFactory: (matDateLocale: string) => {
      switch (matDateLocale) {
          case 'et-EE': {
              return new DateFnsAdapter(et);
          }
          default: {
              return new DateFnsAdapter(enUS);
          }
      }
    }

}

[crisbeto]

The idea was to provide the locale object MAT_DATE_LOCALE instead of the string like you usually would, if you're using the date-fns adapter. E.g.

@NgModule({
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: et}
  ]
})

[tuuling]

MAT_DATE_LOCALE is only used by the date adapter then and wont cause errors elsewhere if it's not a string?

I guess what would help is a bit if documentation then if this is the intended. Currently it's quite hard to figure out what the right way is for date-fns adapter?

Hopefully someone googling the problem will end up in this thread and find a solution.

[crisbeto]

Yes, MAT_DATE_LOCALE is only used by date adapters.

[tuuling]

Fair enough, not a bug then. But I would then suggest an update in the docs for this?
https://material.angular.io/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings