Multiple MAT_DATE_FORMATS parse options

[nickwinger]

Bug, feature request, or proposal:

feature request

What is the expected behavior?

Currently the Datepicker only supports one parse format.
I want to use multiple parse formats (e.g. Use the localized AND the Database-Format)

What is the current behavior?

Only one parse format is supported

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

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

The user wants to input with the localized DateFormat AND optional with a Database-Format (YYYYMMDD)

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

All newest Versions

Is there anything else we should know?

[KlausHans]

Hello, why is this closed? The referenced commit only adds a todo in the documentation if i understand correctly.

I stumbled over the same problem. In my case i want to have different parse (eg MM.YYYY) and display (eg MMMM YYYY) formats. But the display format should also be a parse format so that the user can simply adjust the displayed value (eg the year). With the current state the adjusted value is parsed as invalid and a validation error is shown.

[MatthiasKunnen]

The referenced commits removes a todo, it doesn't add one. The thing is, multiple parse formats have always been possible but only with the MomentDateAdapter. Your case could be solved using the following configuration:

@NgModule({
  imports: [MatDatepickerModule, MomentDateModule],
  providers: [
    {
      provide: MAT_DATE_FORMATS,
      useValue: {
        parse: {
          dateInput: ['MM.YYYY', 'MMMM YYYY'], // <- Use both formats for parsing
        },
        display: {
          dateInput: 'MMMM YYYY', // <- display format
          monthYearLabel: 'MMM YYYY',
          dateA11yLabel: 'LL',
          monthYearA11yLabel: 'MMMM YYYY',
        },
      },
    },
  ],
})
export class MyApp {}

Something to be careful about: Moment by default parses in a very forgiving way, this will result in incorrect behavior with long formats such as MMMM. A solution for this is underway in the form of #16462 which allows setting the strict flag. (Giving it a thumbs up might make the assigned reviewer merge the PR quicker)

If I misunderstood, can you give an example about which dates you're trying to parse and their respective formats?

[KlausHans]

Oops, messed it up.

Thank you very much for the informations!

Your example nails the formats i want to have very well. I will try it.

Edit: It was to hot today here in europe. I even oversaw the added documention in the commit. The new documentation is not yet live, correct? Or where do i find it?

[MatthiasKunnen]

@KlausHans, something to be wary about, edits don't trigger notifications so I didn't see the edit until now.

There was a temporary problem with the documentation being out-of-date but it has since been updated. The documentation can be found at https://material.angular.io/components/datepicker/overview#customizing-the-parse-and-display-formats title MomentDateModule formats.

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