adjust datepicker format

projects/project-3/frontend/src/app/dashboard/dashboard.component.ts

@@ -26,6 +26,8 @@ import {
 import {IMapBikePoint} from '../service/domain/map-bike-point';
 import {SelectionModel} from '@angular/cdk/collections';
 import {MatCheckboxChange} from '@angular/material/checkbox';
+import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, NativeDateAdapter} from '@angular/material/core';
+import {formatDate} from '@angular/common';
 
 export type ChartOptions = {
   title: ApexTitleSubtitle
@@ -43,13 +45,37 @@ export type ChartOptions = {
   noData: ApexNoData;
 };
 
+export const PICK_FORMATS = {
+  parse: {dateInput: {month: 'short', year: 'numeric', day: 'numeric'}},
+  display: {
+    dateInput: 'input',
+    monthYearLabel: {year: 'numeric', month: 'numeric'},
+    dateA11yLabel: {year: 'numeric', month: 'numeric', day: 'numeric'},
+    monthYearA11yLabel: {year: 'numeric', month: 'long'}
+  }
+};
+
+class PickDateAdapter extends NativeDateAdapter {
+  format(date: Date, displayFormat: Object): string {
+    if (displayFormat === 'input') {
+      return formatDate(date, 'dd-MM-yyyy', this.locale);
+    } else {
+      return date.toDateString();
+    }
+  }
+}
+
 const chartHeight = 460;
 
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss'],
-  changeDetection: ChangeDetectionStrategy.Default
+  changeDetection: ChangeDetectionStrategy.Default,
+  providers: [
+    {provide: DateAdapter, useClass: PickDateAdapter},
+    {provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS}
+  ]
 })
 export class DashboardComponent implements OnInit {
   @ViewChild('Station-Dashboard-Borrow-Duration') chart: ChartComponent;