Angular Date Picker - Update MAT_DATE_FORMATS dynamically

Question

I'm working at an Angular9 app that works with dates. It displays and updates several <mat-datepicker> fields.

I am using a custom MAT_DATE_FORMATS and MomentDateAdapter (@angular/material-moment-adapter) from https://www.npmjs.com/package/@angular/material-moment-adapter.

I'm using the following code which works okay:

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

//..
providers: [
  {
     provide: MAT_DATE_FORMATS, useValue: APP_MOMENT_DATE_FORMATS
  },
  {
    provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]
  }
]
// ..

Stackblitz demo: https://stackblitz.com/edit/angular-formatted-datepicker-vdtaqj?file=app%2Fdatepicker-overview-example.ts

Now, I was wondering if I could update the value of the APP_MOMENT_DATE_FORMATS.display.dateInput dynamically - eg: maybe it will be setted from a configuration service via a http request, or maybe I will display a selector in the interface.

example:

export const APP_MOMENT_DATE_FORMATS =
  {  
    // ..  
    display: {
     dateInput: this.appService.dateInputFormat,
     // ..
   }
  };

I know that I could implement a custom date adapter, as described here: Angular 2 Material 2 datepicker date format.

But I was wondering if there is another method to do it, without implementing a new custom date adapter.

Thanks.

cuongle · Accepted Answer · 2021-10-13 15:52:45Z

5

After spending hours looking for solution, I come up the below solution by just simply injecting MAT_DATE_FORMATS and change it dynamically:

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

@Component({
...  
providers: [
    {
    provide: MAT_DATE_FORMATS, useValue: APP_MOMENT_DATE_FORMATS
    },
    {
    provide: DateAdapter,
    useClass: MomentDateAdapter,
    deps: [MAT_DATE_LOCALE]
    }
]
})

export class DatePickerComponent implements OnInit, OnDestroy {

constructor(@Inject(MAT_DATE_FORMATS) public data: any) {
    data.parse.dateInput = 'DD/MM/YYYY'
    data.display.dateInput = 'DD/MM/YYYY'
  }
}

edited Oct 13, 2021 at 15:52

answered Oct 13, 2021 at 15:20

cuongle

75.5k30 gold badges155 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

qwerty Over a year ago

how to change dynamically inside method in the class DatePickerComponent?

Guilherme Henrique Boing Sep 5 at 1:49

Thank you for this awnser, i spend all my afternoon trying many aproaches but could not find out, i also tried using MatDateFormat as date format put inside the ngOnInit and worked: """ export const DATE_FORMATS: MatDateFormats = { ...MAT_NATIVE_DATE_FORMATS, display: { ...MAT_NATIVE_DATE_FORMATS.display, dateInput: { year: "numeric", month: "numeric", day: "numeric" }, }, }; """ """ providers: [ { provide: MAT_DATE_FORMATS, useValue: DATE_FORMATS, }, ], """ """ constructor( @Inject(MAT_DATE_FORMATS) public dateFormat: MatDateFormats ) {} public

Neo Liu · Accepted Answer · 2022-03-15 13:14:47Z

Not too sure how to update the provider's value at runtime, but there is workaround to provide a different MAT_DATE_FORMATS value for mat-datepicker at component level.

As mentioned in Angular Docs:

Components and directives on the same element share an injector.

Place a customPickerFormats directive with a different MAT_DATE_FORMATS provider into the mat-form-field wrapping the mat-datepicker.

in directice.ts:

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

@Directive({
  selector: '[appCustomPickerFormats]',
  providers: [
    {
      provide: MAT_DATE_FORMATS,
      useValue: {
        parse: {
          dateInput: 'DD/MM',
        },
        display: {
          dateInput: 'Do MMMM',
          monthYearLabel: 'MMM',
          dateA11yLabel: 'LL',
          monthYearA11yLabel: 'MMMM YYYY',
        },
      },
    },
  ],
})
export class CustomPickerFormatsDirective {}

in component.ts:

<mat-form-field appCustomPickerFormats>
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="customPicker">
  <mat-datepicker-toggle matSuffix [for]="customPicker"></mat-datepicker-toggle>
  <mat-datepicker #customPicker></mat-datepicker>
</mat-form-field>

The first mat-datepicker without the directive will by default use whatever MAT_DATE_FORMATS value you set for the HostComponent or the modules the component lays.

A working stackblitz example here.

Collectives™ on Stack Overflow

Angular Date Picker - Update MAT_DATE_FORMATS dynamically

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related