How To Apply Multiple MAT_DATE_FORMATS On Same Component

Question

I have a component that contains many date inputs. All of them, but one, will use the standard format (MM/DD/YYYY). I read here, which helped me figure out how to get the customFormat (MM/YYYY) I wanted, but now it shows on every date input because of the provider 'useValue' on the component level. Which lead me to this question I cannot find a proper answer for. How can I have multiple formats on the same component?

On the TypeScript:

    export const COMMISSION_DATE_FORMATS = {
      parse: {
        dateInput: 'MM/YYYY',
      },
      display: {
        dateInput: 'MM/YYYY',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'MMMM YYYY',
      },
    };
...    
    providers: [
        { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
        { provide: MAT_DATE_FORMATS , useValue: COMMISSION_DATE_FORMATS },
      ]

On the UI:

One requiring custom format (displays properly)

  <mat-form-field>
        <input matInput [matDatepicker]="dSaleMonthPicker" placeholder="Commission Month & Year" formControlName="dSaleMonth">
        <mat-datepicker-toggle matSuffix [for]="dSaleMonthPicker"></mat-datepicker-toggle>
        <mat-datepicker #dSaleMonthPicker startView="multi-year" (yearSelected)="commissionDateYearHandler($event)" (monthSelected)="commissionDateMonthHandler($event, dSaleMonthPicker)">
        </mat-datepicker>
     </mat-form-field>

Others requiring standard format (but they are also displaying with custom format)

  <mat-form-field>
      <input matInput formControlName="dSold" [matDatepicker]="dSoldPicker" placeholder="Sold Date" matTooltipPosition="below">
      <mat-datepicker-toggle matSuffix [for]="dSoldPicker"></mat-datepicker-toggle>
      <mat-datepicker #dSoldPicker [startAt]="dSold"></mat-datepicker>
    </mat-form-field>

I know with the formControlName I can't use typical "piping" from Angular, so how can I have multiple formats on the same component? Perhaps there is a way to add the custom format directly on the input? Any help is greatly appreciated.

Stoned

Hi Briana, have you found a solution for this? I'm facing the same challenge. Cheers! – Substantialize

I too have the same issue. I followed this link and it worked for me. – Middlings

Answer 1

I found the best answer here. Basically, we need to create multiple directives with different formats and attach the desired directive to the datepicker.

Working example with MomentDateAdapter can be found here (thanks to Abishek from above link).

Working example with NativeDateAdapter can be found here

Venturous

Answer 2

You can use customDateFormats by creating a directive in same component. You can use below code

In Js file:

import { Directive } from '@angular/core';

export const DATE_FORMAT = {
  parse: {
    dateInput: 'MM/YYYY',
  },
  display: {
    dateInput: 'MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@Directive({
  selector: '[dateFormat]',
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT },
  ],
})
export class CustomDateFormat {
}

In html file

  <mat-form-field customDate>
      <input matInput formControlName="dSold" [matDatepicker]="dSoldPicker" placeholder="Sold Date" matTooltipPosition="below">
      <mat-datepicker-toggle matSuffix [for]="dSoldPicker"></mat-datepicker-toggle>
      <mat-datepicker #dSoldPicker [startAt]="dSold"></mat-datepicker>
    </mat-form-field>

Note : Dont forget to add your customDate directive in module.ts file

Mcgrody