Datepicker Adapter not working as expected.

[vapits]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Datepicker should use the LOCALE_ID or the NativeDateAdapter.

What is the current behavior?

Datepicker input has the correct date format though Calendar doesn't display and it works only if the user writes manually a US formatted date. Same with validators, if the user type a different than US format it returns error.

What are the steps to reproduce?

I have this MaterialModule in my app:

const APP_DATE_FORMATS = {
  parse: {
      dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
  },
  display: {
      dateInput: 'input',
      monthYearLabel: {year: 'numeric', month: 'short'},
      dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
      monthYearA11yLabel: {year: 'numeric', month: 'long'},
  }
};

export class AppDateAdapter extends NativeDateAdapter {

  parse(value: any): Date | null {
    if ((typeof value === 'string') && (value.indexOf('-') > -1)) {
      const str = value.split('-');
      const dayArray = str[2].split('T');

      const year = Number(str[0]);
      const month = Number(str[1]) - 1;
      const day = Number(dayArray[0]);

      return new Date(year, month, day);
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }

  format(date: Date, displayFormat: Object): string {

    if (displayFormat === 'input') {
      const day = date.getDate();
      const month = date.getMonth() + 1;
      const year = date.getFullYear();
      return `${day}-${month}-${year}`;
    } else {
      return date.toDateString();
    }
  }
}

@NgModule({
  exports: [
    MdModules,
  ],
  declarations: [],
  entryComponents: [
    PersonalDataDialogComponent
  ],
  providers: [
    { provide: DateAdapter, useClass: AppDateAdapter },
    { provide: MD_DATE_FORMATS, useValue: APP_DATE_FORMATS }

  ]
})
export class MaterialModule {
  constructor(private dateAdapter: DateAdapter<Date>) {
    dateAdapter.setLocale('nl-NL');
  }
}

I'm getting this on the input:

As you see above correct input but calendar doesn't work.
If the user try manually field is getting an error:

But if I enter US format:

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

Angular: 4.3.3
Material beta.8

[Eppiox]

I implemented a similar approach for non American style dates and have similar behavior with an added quirk:
The user enters 12-2-2017 being the 12th of Feb, the value returns correctly from the picker, however the visual acts odd, when clicking on the picker shows the month instead of the day, in my case December instead of Feb.

A simple format selector built into it would be GREAT.

[ghd8]

Here you can find a working example (DateAdapter) from @julianobrasil and the info about the planned solution #6263 (comment)

[vapits]

@ghd8 it doesn't work on plnkr and if I add it in my project (I saw it already) it has exactly the same behavior. :/

[julianobrasil]

@vapits, have you called this.dateAdapter.setLocale('pt-br'); as I did in the plunk? It needs to be called once anywhere in the project (since the date adapter is a singleton). Or, even better, setup your LOCALE_ID. I've changed the plunk a little bit to show this possibility (look in the main.ts): https://plnkr.co/edit/jc4Ywu?p=preview

[vapits]

Yes @julianobrasil and I have exactly the same behavior. :/

[julianobrasil]

@vapits, in the example you've posted above, you're not showing the parser function... it's the main part of all the process... do you have one in your real code?

[vapits]

@julianobrasil just edited my code.
I'm getting a value like: 2017-07-28T06:33:45.206Z which I want just to format like dd-MM-yyyy. It seems that it works only for the first display on the input only but actually manually the inputs waits for US style and same on Calendar.

[julianobrasil]

Modify my plunk and post it here with your date adapter. It's easier to see what's happening.

[vapits]

The plnkr doesn't work for me on plnkr website it fails to load the packages :S

[julianobrasil]

ok... try to add this code to your date adapter:

parse(value: any): Date | null {
    if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
      const str = value.split('-');

      const year = Number(str[2]);
      const month = Number(str[1]) - 1;
      const date = Number(str[0]);

      return new Date(year, month, date);
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }

[vapits]

I did. I'm getting the calendar work but the parsed date is in wrong format:

It doesn't respect it when I change it to dd-MM-yyyy

[julianobrasil]

oh, my bad... the right function is:

parse(value: any): Date | null {
    if ((typeof value === 'string') && (value.indexOf('-') > -1)) {
      const str = value.split('-');

      const year = Number(str[2]);
      const month = Number(str[1]) - 1;
      const date = Number(str[0]);

      return new Date(year, month, date);
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }

But note that it will mess up with the format function you've written, once it's output is different from what this parse function expects.

[vapits]

@julianobrasil there are not changes on this function and mine.

[julianobrasil]

Yes, there are changes: I've changed value.indexOf('\') to value.indexOf('-') in the if statement.

[vapits]

@julianobrasil Yes I already had fixed this :P :) Still I'm getting the screen shot above :/