Components: valid dd/mm format switch sides after manual input on datepicker field

[odahcam]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

That the valid dd/mm/yyyy inputed date remains as it is, not matter what, they always switch sides on change.

What is the current behavior?

E.g.: 03/02/1990 becomes 02/03/1990.

What are the steps to reproduce?

Set a custom locale like Brasil:

// location
import localePt from '@angular/common/locales/pt';
import localePtExtra from '@angular/common/locales/extra/pt';

registerLocaleData(localePt, 'pt', localePtExtra);

Then try to use the datepicker with manual input.

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

Because it works very well with the Angular locale config, there's just this switch bug that does not work properly.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

{
    "@angular/core": "^6.0.6",
    "@angular/material": "^6.3.0",
}

Is there anything else we should know?

UI input:

Manual input:

~I really don't wanna use moment.js~

---

It seems like the StackBlitz example isn't wroking as well: https://stackblitz.com/angular/vnvbdjykmve?file=app%2Fdatepicker-locale-example.ts

[stevenxi]

Got a similar issue #12057 And also found a temporary fix.
You just need to implement your own date adapter.
https://stackoverflow.com/questions/44452966/angular-2-material-2-datepicker-date-format

The reason of this bug probably due to the date picker's value format doesn't match the build in date adapter's date format.

[Bielik20]

Thank you for your response. Sadly, date adapter doesn't seem to work at all for me. I guess I will have to wait for an official fix.

EDIT: Date Adapter needs to be provided everywhere to work, not just in root.

[Giocapetini]

I'm also having this issue, if i type in manually 01/07/2018 onBlur makes it 07/01/2018 (same locale PT-br)

[Giocapetini]

@Bielik20 when you say everywhere, what do you mean ? do i have do declare it on my controller not just my module ?

[Giocapetini]

My solution to this was to use moment date adapter!

[Bielik20]

@Giocapetini If you have multiple modules in your application it is not sufficient to provide it in a top-level module (i.e. app.module, core.module etc.). You need to provide it in every module you want to use it in (or in shared.module).

[odahcam]

moment.js is too large 😭

[Giocapetini]

@odahcam .min is only 16k
the adapter for the datepicker is an angular material npm package.
fixed it for me

https://github.com/angular/material2/blob/master/src/material-moment-adapter/adapter/moment-date-adapter.ts

https://blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b3

https://www.npmjs.com/package/@angular/material-moment-adapter

https://material.angular.io/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings

[benjamincharity]

@Giocapetini what version of moment are you looking at? This is what I see for the minified files:

[Giocapetini]

@benjamincharity

Or you can use just the material moment date adapter which is even smaller (7.33kb)
https://github.com/angular/material2/blob/master/src/material-moment-adapter/adapter/moment-date-adapter.ts

[benjamincharity]

Very interesting.. Wonder what they are basing that number off of. My image above is showing the actual sizes..

How would you use the moment adapter without Moment? It's importing the moment library inside, so it's definitely not 8kb..

https://github.com/angular/material2/blob/master/src/material-moment-adapter/adapter/moment-date-adapter.ts#L16-L20

[Giocapetini]

They are using Gzip (https://www.gzip.org/), thus the reason for the small size.
i'm sorry i expressed myself in the wrong manner, moment adapter imports moment.js, but you could make your own custom date adapter without moment.js
i myself found the moment date adapter a "quickfix".
in theory if you use moment date adapter with gzip it would bring down the file size to a bit over 20kb.
You can also use tar + xz compression to further compress.

[benjamincharity]

Ah yep, missed that in your attached image. Makes sense.

Yeah, I went down the custom date adapter path. Just making sure I didn't miss another way to use it (since I cannot include moment..)

[odahcam]

@benjamincharity could you share this adapter in a gist?

[Giocapetini]

@odahcam
https://github.com/manfredsteyer/angular-material-custom-date-adapter/blob/master/src/app/shared/custom-date-adapter.ts (manfredsteyer is the same guy who made angular-oauth2-oidc)

https://blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b3

https://medium.com/@esanjiv/working-with-custom-dateadapter-for-angular-material-2-datepicker-76d4446277dc

[benjamincharity]

I definitely stole most of this from some SO answer and haven't cleaned it up, but it does seem to work.

https://gist.github.com/benjamincharity/46cdcb1155b4945ed95495780c67787e

The format function is the one you really want.

[michael-letcher]

@angular team Is there any plans to fix this. It's quite annoying that OTB locale input does not work by assuming the input is not the locale configured and is being formatted over and over incorrectly.

So it means adding 19.10.20 is considered invalid date (when set to locale AUS), which it clearly is not, but is returned as invalid as the input ignores the set locale and only assumes MM/DD/YYYY

[vlanz]

Does anybody else have the problem of an untranslated header month selector when implementing a custom date adapter?