From 0c266c536099963144f6bad03185ac8acb8efab5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?=
 <sebastien.a-andre@external.total.com>
Date: Thu, 22 Apr 2021 17:17:32 +0200
Subject: [PATCH] Ajout d'un format custom de la date

---
 .../src/app/new-jump/new-jump.component.html  |  3 ++-
 .../src/app/new-jump/new-jump.component.ts    | 24 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html b/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html
index 432b922..cc9ca06 100644
--- a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html
+++ b/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>
diff --git a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts b/Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts
index 1539136..4d34d3b 100644
--- a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts
+++ b/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;