how to set custom (dd-mm-yyyy) date value in Angular Material date picker while submitting form

Question

When i set value in Angular Material date picker it shows correct date format as i desire like dd-mm-yyyy but when i submit the form it shows entire date object like - Mon Oct 07 2019 00:00:00 GMT+0530 (India Standard Time) i want it to be dd-mm-yyyy

I tried using MAT_DATE_FORMATS with MatDateFormats but it only shows it in front end and not formats it while submitting

1.. This is my date formatter -

I need date format while submitting form in dd-mm-yyyy format for all datepicker controls in my form

Answer 1

Try to set your default location to somewhere that use DD-MM-YYYY pattern. For that, at app.module.ts, set:

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

...

@NgModule({
  providers: [{ provide: LOCALE_ID, useValue: 'en-nz' }],
})

See my example at stackblitz: https://stackblitz.com/edit/angular-kgm6bj-pqxemd

Angular Locale: https://angular.io/api/core/LOCALE_ID

Check Language Code: https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes