Components: Datepicker German Format

Created on 9 Jun 2017 · 10Comments · Source: angular/components

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?

Source

weisss123

Most helpful comment

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

JunusErgin on 12 Jun 2017

👍8

All 10 comments

See #4358

donroyco on 9 Jun 2017

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

julianobrasil on 9 Jun 2017

👍2

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

JunusErgin on 12 Jun 2017

👍8

Thank you guys. This worked for me

weisss123 on 12 Jun 2017

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?

JunusErgin on 26 Jul 2017

@JunusErgin See #6030 and #5722

donroyco on 26 Jul 2017

👍1

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

zszep on 5 Oct 2017

You can use moment.js to validate the date

aboglioli on 2 Nov 2017

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