Components: [Bug] Datepicker shows incorrect month

[rafaelss95]

Bug, feature request, or proposal:

Bug.

What is the expected behavior?

The datepicker should open at the correct month.

What is the current behavior?

Datepicker doesn't display the correct month if you use a custom locale like this: this.dateAdapter.setLocale('pt-BR'); and select a day lower than 13.

What are the steps to reproduce?

Select a day lower than 13 and open the datepicker again.

Providing a Plunker (or similar) is the best way to get the team to see your issue.
https://plnkr.co/edit/gkYoHKauuzfvtRDMmwtl?p=info

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

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

Angular: 4.1.3
Material: 2.0.0-beta.6
Browsers: Chrome (I only tested on this).

Is there anything else we should know?

[julianobrasil]

Dupe of #4832. Take a look at that. You'll have to build up your adapter.

[julianobrasil]

In fact, just copy the one provided by the Angular team here in the github and customize it a little bit:

parse(value: any, parseFormat: Object): Date | null {
    // We have no way using the native JS Date to set the parse format or locale, so we ignore these
    // parameters.
    if (value && (typeof value !== 'object') && (value.indexOf('/') > -1)) {
      const str = value.split('/');
      value = new Date(Number(str[2]), Number(str[1]) - 1, Number(str[0])).toString();
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }

[rafaelss95]

Hi @julianobrasil, thanks for sharing this custom adapter..

About the issue: I saw that and that's why I found the setLocale (I haven't found anywhere else)...

About the adapter: In my opinion, I don't need to build my own adapter since almost everything are being correctly displayed (so I assume the _Intl_ works perfectly for pt-BR). The only issue that I'm facing is that you can in plunker:

1 - Select a day lower than 13;
2 - Open the datepicker... you'll see that it'll open in a different month.

I really don't know why it happens only if I select a day lower than 13... maybe a conflict with months (1 - 12)?

[julianobrasil]

It's the parse function. And that's why you need to build your adapter. By default, it expects the english format (month/day/year) date at the input (and that is also the reason the problem apears to be just in days lower than 13 - the parser thinks that number is a month). It's a problem that everybody is facing right now, related to some limitations of the Date object. There is a comment written in the code of the native adapter at the parser function: "We have no way using the native JS Date to set the parse format or locale, so we ignore these parameters".

[julianobrasil]

Take a look at this plunker, it's working: https://plnkr.co/edit/FlgGpjqyDlypas0VZJzo?p=preview

As you extends the NativeDateAdapter, it's just one tiny class overriding the parser function. In fact there's no need to specify the constants as the setLocale takes care of it.

[rafaelss95]

Hey @julianobrasil,

Again thanks for sharing this adapter. Now that you pointed me to the right direction on creating adapters, I'm just wondering if it can be set dynamically.

In a nutshell: I have some custom _adapters_, how to provide it?

Once the language is changed, all the datepickers in application must change to this specific format (language).

Did you understand me? I'm sorry to asking it here, but it's totally unclear in docs.

Btw, I don't know if it matters, but I'm using @ngx-translate lib to handle translations.

[julianobrasil]

@rafaelss95 , technically you can override the parse function directly in the component (or anywhere you want - the DateAdapter is a singleton). So, create a function with this signature: (value: any) => Date | null and set the parse attribute of the DateAdapter to it.

Take a look at this modified plunker (I took away the CustomAdapter and build everything in the component class): https://plnkr.co/edit/KaRCs7?p=preview

Well, from here, I think you can find a way (maybe a service) to make it globally from your custom adapters.

[playground0076]

@julianobrasil - thanks for sharing the plnkr and that gave me a headstart. However, I am trying to limit the date input to contain only numbers and if anything else is entered, it has to display me the error message. I am playing with the plnkr link you provided but not able to achieve it. Can you please help me. thanks

[julianobrasil]

You have a few options here. One is building a directive that allows just numbers and the date separator (slashes, dashes, points etc). It would also have to check whether the user typed the right number of digits for days, months and year. You'd end up having to build a masking component. It's not that complicated, but you have a mddatepicker to save you from all this work.

Instead of using a trigger button, just use a (focus) event to open the datepicker. It forces the user to choose a date from calendar instead of typing it. Take a look at it over here: https://plnkr.co/edit/wkD1HZ?p=preview

[playground0076]

@julianobrasil hmmm, i tried this approach but one problem is if the field is not a mandatory field and want to clear off the existing selection, i am not able to do it..:(

[julianobrasil]

I didn't get it... why didn't you manage to clear it? I've updated the plunker, but don't know if I'm following you: https://plnkr.co/edit/wkD1HZ?p=preview

[playground0076]

@julianobrasil - :). it's my bad. I am in a time crunch and my mind is not functioning properly. Thanks so much for your help. this is the best solution.

[angular-automatic-lock-bot[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._}