I'm using a matDatePicker this way:
<mat-form-field class="col">
<input #pickerDal matInput [matDatepicker]="pickerDal" placeholder="Dal"
(dateChange)="fromDate('change', $event)" formControlName="formDataDal">
<mat-datepicker-toggle matSuffix [for]="pickerDal"></mat-datepicker-toggle>
<mat-datepicker #pickerDal></mat-datepicker>
</mat-form-field>
and in my .ts I have declared:
formDataDal: new FormControl()
it was working correctly until I've decided to add a default display value in the date picker. What I did was adding [(ngModel)]="dal_default" inside input tag, and in .ts file and initializing dal_default :
this.dal_default = new Date();
Now if I try to print the value of the Date using the formControlName or this dal_default variable, I get a strange format string. In particular, if I print the default date displayed, it is correctly printed as date, but then if I change the date I get a string (I believe it represents the milliseconds?). FOr example, the following one is the one I get from Date 12/12/2018:
1543618800000
The only other thing I did was change the date format inside app.module.ts to have Dates in DD/MM/YYYY format:
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material';
import { MomentDateModule, MomentDateAdapter } from '@angular/material-moment-adapter';
export const MY_FORMATS = {
parse: {
dateInput: 'DD/MM/YYYY',
},
display: {
dateInput: 'DD/MM/YYYY',
monthYearLabel: 'MM YYYY',
dateA11yLabel: 'DD/MM/YYYY',
monthYearA11yLabel: 'MM YYYY',
},
};
and inside providers:
{ provide: MAT_DATE_LOCALE, useValue: 'it' },
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }
The matdatepicker correctly shows the date in the format I want. I do not believe this is the problem, but can't be 100% sure.
What is the problem?
