How to customize date in to 2017-11-20T11:23:00 - Angular material 5

Question

I am using following code for displaying date picker

Answer 1

Convert the value to JSON. The toString output converts to the format "Wed Jan 24 2018 00:00:00 GMT+0530". When you convert it to JSON it is formatted as 2018-01-24T11:23:00.000Z

Answer 2

In your component.html, use two inputs, first one to hold date from mat-datepicker, second one bind with model. In (selectedChanged) event of the 'mat-datepicker' update 'myModel.MyDateString' from the date-picker value:

<mat-form-field>
    <input type="hidden" [matDatepicker]="myDate">
    <input  matInput  placeholder="My date" [(ngModel)]="myModel.MyDateString">
    <mat-datepicker-toggle matSuffix [for]="myDate"></mat-datepicker-toggle>
    <mat-datepicker #myDate  (selectedChanged)="updateDateToString($event)"></mat-datepicker>
  </mat-form-field>

Inside your component.ts:

updateDateToString(event) {
let newDate = new Date(event)

let dd: number | string = newDate.getDate();
if (dd < 10) {
  dd = '0' + dd;
}
let mm: number | string = newDate.getMonth() + 1;
if (mm < 10) {
  mm = '0' + mm;
}
const yy: number = newDate.getFullYear();
this.myModel.MyDateString = `${yy}-${mm}-${dd}`;    

}