Incorrect value from event.value

Question

I need to format date in angular material so i follow this guide:

My code is in this compoment.html:

<mat-form-field>
            <input id="datanint" formControlName="dataBirth" (dateChange)="emitBirthDateChangeForValidation($event)" matInput [matDatepicker]="picker" />
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker startView="multi-year" [startAt]="startDate"></mat-datepicker>

        </mat-form-field>

my ts:

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


 providers:[
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    { provide: MAT_DATE_FORMATS, useValue: FORMAT }]
})


cosntructor(){
 this.dataBirth=new FormControl(moment());
}

     emitBirthDateChangeForValidation(event: any) {
            console.log(event);
            this.eventEmit.emit(event);
            }
        }

I copy this code also if the stackblitz project that I have just linked and when I print the event.value in the project linked I have (when It's called data change):

value: 2020-10-01T22:00:00.000Z

In my own project when I print event.value I have (when It's called data change):

value: Moment {_isAMomentObject: true, _i: {…}, _isUTC: false, _pf: {…}, _locale: Locale, …}

I don't have the moment object into event.value but I must have only date. Anyone can help me?

Answer 1

Try this:

import * as moment from 'moment';
//your function
emitBirthDateChangeForValidation(event: any) {
   console.log(moment(event.value._d).format("MM/DD/YYYY"));
}

Once you get the correct value, you can configure that array to retrieve relevant parts, just like I have extracted Date in MM/DD/YYYY format in the above code.

PS: I hope you have already done npm install moment --save