bug(material-date-fns-adapter): Wrong option for format method
See original GitHub issueIs 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: https://github.com/angular/components/blob/39921f43382e3abc90c14fd8602d0cf371239fce/src/material-date-fns-adapter/adapter/date-fns-adapter.ts#L193
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
https://github.com/angular/components/blob/39921f43382e3abc90c14fd8602d0cf371239fce/src/material-date-fns-adapter/adapter/date-fns-adapter.ts#L55
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):
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:6 (2 by maintainers)
Top GitHub Comments
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
The idea was to provide the locale object
MAT_DATE_LOCALE
instead of the string like you usually would, if you’re using thedate-fns
adapter. E.g.