How to change angular material datepicker format

Question

This is the format of date I am getting when I am using angular material datepicker....Wed Nov 21 2018 00:00:00 GMT+0530 (India Standard Time)

But I need date in (YYYY-MM-DD) or (YYYY-MM-DDTHH:mm) this format.

this is model class I am using to capture data from angular material form

export class FlightSchedule {      constructor(         public destination: string,         public origin: string,         public date: string,         public limit: string     ) {}  } 

Please help me, I am unable to convert date in YYYY-MM-DD or YYYY-MM-DDTHH:mm format.

I am new to Angular

Thanks in advance

Answer 1

You need to provide an object containing the formats you wish to use. The object should look something like:

export const MY_FORMATS = {   parse: {     dateInput: 'LL',   },   display: {     dateInput: 'YYYY-MM-DD',     monthYearLabel: 'YYYY',     dateA11yLabel: 'LL',     monthYearA11yLabel: 'YYYY',   }, }; 

You then need to add that in to your providers array, like so:

  import { MAT_DATE_FORMATS } from '@angular/material';   import { MomentDateAdapter } from '@angular/material-moment-adapter';    //...    providers: [     {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},     {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},   ], 

Here is a StackBlitz demo to show it working

Answer 2

No need to use MomentDateAdapter!

Here's my solution with the least amount of code and using the MAT_NATIVE_DATE_FORMATS.

1. Declare your own date formats

import { MatDateFormats, MAT_NATIVE_DATE_FORMATS } from '@angular/material';  export const GRI_DATE_FORMATS: MatDateFormats = {   ...MAT_NATIVE_DATE_FORMATS,   display: {     ...MAT_NATIVE_DATE_FORMATS.display,     dateInput: {       year: 'numeric',       month: 'short',       day: 'numeric',     } as Intl.DateTimeFormatOptions,   } }; 

2. Use them

@Component({   selector: 'app-vacation-wizard',   templateUrl: './vacation-wizard.component.html',   styleUrls: ['./vacation-wizard.component.scss'],   providers: [     { provide: MAT_DATE_FORMATS, useValue: GRI_DATE_FORMATS },   ] }) 

Don't forget to set the appropriate language!

constructor(private readonly adapter: DateAdapter<Date>) {} this.adapter.setLocale(this.translate.currentLang); 

That's all!