Datepicker Adapter not working as expected.

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

[Manasonabhaban]

Can I load year view format. I do not want to load day. Please help me out in Angular 4.Thanks in advance.

[mmalerba]

@julianobrasil Yes you are on the right track. So Date.parse considers those to be valid dates and returns valid Date objects for them. In order to make it consider those invalid you would need to check for those cases and then return something that isValid will classify as an invalid date. I recommend doing this by just changing the parse function and leaving isValid alone, like this:

parse(value: any) {
  if (/* Check for strings I consider invalid */) {
    return new Date(NaN);
  }
  // continue constructing Date
}

Also I just wanted to say thank you for all of your help responding to datepicker issues 😃 I really appreciate it