Datepicker German Format

[weisss123]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

If I choose a date in format dd.mm.yyyy (Datepicker Module) I expect that the popup will appear in month mm.

What is the current behavior?

Problem in Datepicker Module:
If dd<=12 then the popup appears in month dd instead of mm.

What are the steps to reproduce?

Just choose a date with dd<=12
I am even able to reproduce it on your site: https://material.angular.io/components/component/datepicker

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

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

Is there anything else we should know?

[donroyco]

See #4358

[julianobrasil]

Also take a look at this plunker (with a dateadapter), it's working for brazilian portuguese: https://plnkr.co/edit/FlgGpjqyDlypas0VZJzo?p=preview

[JunusErgin]

Hello weisss123,

add the following lines to your AppComponent to get German formatting.

constructor(...,
              private dateAdapter: DateAdapter<Date>,
               ...) {
    this.dateAdapter.setLocale('de');

Add a provider to your module:

providers: [{provide: DateAdapter, useClass: GermanDateAdapter}],

and create a new file GermanDateAdapter:

import { NativeDateAdapter } from '@angular/material';

export class GermanDateAdapter extends NativeDateAdapter {
  parse(value: any): Date | null {
    if ((typeof value === 'string') && (value.indexOf('.') > -1)) {
      const str = value.split('.');
      if (str.length < 2 || isNaN(+str[0]) || isNaN(+str[1]) || isNaN(+str[2])) {
        return null;
      }
      return new Date(Number(str[2]), Number(str[1]) - 1, Number(str[0]), 12);
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }
}

Hope that helps

Junus

[weisss123]

Thank you guys. This worked for me

[JunusErgin]

This is not documented very good in https://material.angular.io/components/datepicker/overview
Is there a way to add my example to this page or some Wiki?

[donroyco]

@JunusErgin See #6030 and #5722

[zszep]

@JunusErgin The parsing is incomplete. I.e. you can enter dates like 33.45.2017 and the control is not marked as invalid. I think the parsing should be much more complex to handle German (and in my case Croatian which is exactly the same as German) date parsing.

[aboglioli]

You can use moment.js to validate the date

[stefantrost]

@JunusErgin @zszep The DateAdapter class has the method createDate(), that has built-in validation. So instead of returning a new Date(Number(str[2]), Number(str[1]) - 1, Number(str[0]), 12); I'm returning the result of super.createDate(Number(str[2]), Number(str[1]) - 1, Number(str[0])); and it works fine for me.

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