components: 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

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 32 (14 by maintainers)

Most upvoted comments

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

Manasonabhaban on Apr 27, 2018

@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

mmalerba on Aug 18, 2017

@vapits, sorry for the wrong code on my last plunk. I had to leave our work (because I’m in a rush in the last days releasing a new project), but I’ve corrected the code now (not the part of the validation): https://plnkr.co/edit/CZi6mI?p=preview

Concerning the validation part, I’m almost sure (didn’t have time to test it), that you have to override the isValid(date:Date) => boolean function, which is currently:

  isValid(date: Date) {
    return !isNaN(date.getTime());
  }

julianobrasil on Aug 18, 2017