Search code examples
angularangular-materialangular-momentangular-material-datetimepicker

Customize angular material moment datepicker display


I'm working now with Angular material datepicker and I use the moment dateadapter as dateadapter.

It works really great but the displayed date on the input doesn't suit my needs. It shows a date in DD/MM/YYYY format while I need it in DD/MM/YY. (eg. 25/7/2019 should be 25/07/19)

Since I can't find documentation on this display format, I'm gonna need a little help to figure out how to do this.


Solution

  • You can set your custom date formats. In your ts file do like this:

    export const MY_FORMATS = {
      display: {
        dateInput: 'DD/MM/YY'
      },
    };
    
    @Component({
      selector: 'demo-component',
      templateUrl: './demo.component.html',
      styleUrls: ['./demo.component.scss'],
      providers: [
        {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
      ],
    })