md-datepicker uses wrong formats

[ExTheSea]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When selecting a date like e.g. the 4. May and then reopening the datepicker it should still interpret it as the 4. May and not the 5. April.

What is the current behavior?

When opening the the datepicker and selecting the 4. May the input will display the date 4.5.2017. When reopening the datepicker it will display the month view of April while still selecting the 4. May.

What are the steps to reproduce?

Open the official example for the datepicker in Chrome Datepicker component page and select a date where the date value is not equal to the month and doesn't exceed 12. Then reopen the datepicker and look what month is open

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

The current behaviour is plain wrong as the day is interpreted as month which will confuse users immensly.

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

I'm using Angular 4.1.3 + Angular material 2.0.0-beta6 but judging from the fact that even the official example is affected it is likely visible in all versions of material in which the datepicker is included.
Chrome 58.0.3029.110 is affected while Firefox 53.0.3 and IE 11 are fine

Is there anything else we should know?

It's possible that this is only visible in countries which don't use a MM.DD but instead a DD.MM format

[mestremuten]

Plunkr of the issue:
http://plnkr.co/edit/EnvLMgi4azsmzcqeDvIM?p=preview

This only seems to happen when the DateAdapter's locale is not en-US. For everything else I tested (en-GB, fr-FR, es-ES) it doesn't show the correct month when reopening the datepicker, if already has a date selected, and selected day is less than 12.

For now, my only solution is to force en-US locale.

[donroyco]

You can write your own custom adapter, as @mmalerba explains in #4736:

This is a limitation of the native JS Date object which is used by the NatvieDateAdapter. In the future material will provide other date adapters that can handle parse formats out of the box, in the mean time you can write your own custom adapter. This is all explained here: https://github.com/angular/material2/blob/master/src/lib/datepicker/datepicker.md

[Kyderman]

@donroyco

I cant seem to get a custom adapter to work.
Any care for an example for dummies?

Thanks

[donroyco]

Unfortunately no(t here). Let's keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are Stack Overflow, gitter, mailing list, etc.

[mestremuten]

I've written a MomentJS adapter that seems to work. At least, it's capable of parsing localized dates, as long as they are the same locale, of course.

It's not fully tested. I work for a company where don't like to spend time writing unit tests (yeah, we live on the edge).

Do you think it worth for me to do a pull request? Or maybe I should send the files/patch to someone? Or maybe you have already written it and only needs to be merged to master branch?

[mmalerba]

@mestremuten We're currently messing with our packaging structure, we need to get it so that adding a Moment.js adapter doesn't force a dependency on Moment.js even for people who are not using it.

Closing since this issue seems to be about the native Date being unable to parse DD-MM-YYY format

[julianobrasil]

@Kyderman, take a look at this: #4955 (comment)

[angular-automatic-lock-bot]

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.}