Ajout d'un format custom de la date

Front/skydivelogs-app/src/app/new-jump/new-jump.component.html

@@ -69,7 +69,8 @@
     <mat-checkbox [(ngModel)]="isSpecial" name="isSpecial">Is a special jump ?</mat-checkbox>
 
     <mat-form-field>
-      <input matInput [matDatepicker]="beginDateDp" [(ngModel)]="beginDate" name="beginDate" disabled (ngModelChange)="onChangeBeginDate($event)">
+      <input matInput [matDatepicker]="beginDateDp" [(ngModel)]="beginDate" 
+             name="beginDate" disabled (ngModelChange)="onChangeBeginDate($event)">
       <mat-datepicker-toggle matSuffix [for]="beginDateDp"></mat-datepicker-toggle>
       <mat-datepicker #beginDateDp disabled="false"></mat-datepicker>
     </mat-form-field>

Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts

@@ -11,10 +11,32 @@ import { JumpService } from "../../services/jump.service";
 import { JumpTypeService } from "../../services/jump-type.service";
 import { GearService } from "../../services/gear.service";
 
+import { formatDate } from '@angular/common';
+import { DateAdapter, MAT_DATE_FORMATS, NativeDateAdapter } from "@angular/material/core";
+
+export const PICK_FORMATS = {
+  parse: { dateInput: 'yy MM dd' },
+  display: {
+      dateInput: 'yyyy-MM-dd',
+      monthYearLabel: 'yyyy MMM',
+      dateA11yLabel: 'yyyy MM dd',
+      monthYearA11yLabel: 'yyyy MMMM',
+  }
+};
+class PickDateAdapter extends NativeDateAdapter {
+  format(date: Date, displayFormat: Object): string {
+      return formatDate(date, displayFormat.toString(), "en");
+  }
+}
+
 @Component({
   selector: "app-new-jump",
   templateUrl: "./new-jump.component.html",
-  styleUrls: ["./new-jump.component.css"]
+  styleUrls: ["./new-jump.component.css"],
+  providers: [
+    { provide: DateAdapter, useClass: PickDateAdapter },
+    { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS }
+  ]
 })
 export class NewJumpComponent implements OnInit {
   public beginDate: Date;