Components: Add DateAdapter for date-fns

Created on 6 Mar 2018  路  10Comments  路  Source: angular/components

Bug, feature request, or proposal:

Feature Request

What is the use-case or motivation for changing an existing behavior?

It would be great to be able to use date-fns instead of javascript Date or moment.js with the date picker.
The feature was refused in the past because date-fns didn't support parsing but nowadays it does: https://date-fns.org/v1.29.0/docs/parse

P4 materiadatepicker feature help wanted

Most helpful comment

All 10 comments

@victornoel we've done by ourselves, you've got all that you need, Just implement and provide
https://github.com/angular/material2/blob/535dcf1782806510f70e9f0888396327c3a36d59/src/lib/core/datetime/date-adapter.ts

material's team should not waste time to implement adapters for each date library

Isn't _date-fns_ just operations on native Date? We're using date-fns and use the NativeDateAdapter, we haven't fixed the parsing yet though, but it should be easy to base it on NativeDateAdapter and add the parsing.

@jleufven you are right, in the end that's what I do too, I use NativeDateAdapter + date-fns in the rest of my code.
Maybe I should close this, @josephperrott?

I think this may still be worth doing. There's some weird time zone corner cases that people sometimes run into with NativeDateAdapter. Making one that uses date-fns under the hood might fix some of those issues for people that choose to use it

I have been looking into this today and created some test code, but would currently wait with a final implementation:

  • Alot of locale specific things (i.e. month names) are only well supported in v2 of date-fns
  • date-fns v2 is still in alpha
  • alot of the locales are not yet updated for v2 (see https://github.com/date-fns/date-fns/blob/master/outdatedLocales.json)

When doing the actual implementation, we need to figure out the best API for setting the locale, as there is no equivalent to moment.locale(). Instead the locale has to be passed to any date-fns call (see https://date-fns.org/docs/I18n), but the API of DateAdapter is based on LOCALE_ID.

So we might end up in a situation, where the consumer has to populate the loaded locales into a mapping structure which is provided to the DateFnsDateAdapter.

Question regarding package-names: we currently have @angular/material-moment-adapter, should we just blindly add @angular/material-date-fns-adapter or should we consider merging into something like @angular/material-date-adapters/(material|date-fns|etc)

is there chance this will be implemented?

@JoniJnm I used the gist you gave and this was working fine but never setting the value at first.
It was missing the method deserialize that is used by DateAdapter.

Tracking this in #20599 going forward

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kara picture kara  路  3Comments

constantinlucian picture constantinlucian  路  3Comments

MurhafSousli picture MurhafSousli  路  3Comments

vanor89 picture vanor89  路  3Comments

alanpurple picture alanpurple  路  3Comments