question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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: 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:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
tuulingcommented, Nov 29, 2021

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

2reactions
crisbetocommented, Nov 29, 2021

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}
  ]
})
Read more comments on GitHub >

github_iconTop Results From Across the Web

Material date-fns adapter - angular - Stack Overflow
js to date-fns in my Angular app, but I'm facing an impediment. I found as well an adapter made by angular @angular/material-date-fns-adapter ......
Read more >
date fns format hours minutes - You.com | The AI Search ...
Go hours minutes and seconds to just minutes with Date-fns ... Its methods provide a mapping to/from calendaric components in local time zone....
Read more >
Managing Dates and Times in JavaScript Using date-fns
Working with dates in JavaScript is a pain. Native date methods are often verbose and occasionally inconsistent. But good news is at hand....
Read more >
Datepicker - Angular Material
The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. It is made...
Read more >
Nebular - Datepicker Angular UI Component - GitHub Pages
@nebular/date-fns - adapter for popular date-fns library. This way is preferred if you need only date formatting. Because date-fns is treeshakable, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found