Angular reactive Form material Date picker manual input format DD/MM/YYYY

Question

I want to change input format of datePicker, default is MM/DD/YYYY i want to change it to DD/MM/YYYY. html code:

<mat-form-field>
    <mat-label>Date de creation min</mat-label>
    <input formControlName="dateDebut" matInput [matDatepicker]="pickerCreationMin"
           placeholder="jj/mm/aaaa">
    <mat-datepicker-toggle matSuffix [for]="pickerCreationMin"></mat-datepicker-toggle>
    <mat-datepicker #pickerCreationMin></mat-datepicker>
</mat-form-field>

format-picker.ts

import { NativeDateAdapter } from '@angular/material';
import { MatDateFormats } from '@angular/material/core';

export class AppDateAdapter extends NativeDateAdapter {
   format(date: Date, displayFormat): string {
      if (displayFormat === 'input') {
        let day: string = date.getDate().toString();
        day = +day < 10 ? '0' + day : day;
        let month: string = (date.getMonth() + 1).toString();
        month = +month < 10 ? '0' + month : month;
        let year = date.getFullYear();
        return `${day}-${month}-${year}`;
      }
      return date.toDateString();
   }
}
export const APP_DATE_FORMATS: MatDateFormats = {
  parse: {
    dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
  },
  display: {
    dateInput: 'input',
    monthYearLabel: { year: 'numeric', month: 'numeric' },
    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric'},
    monthYearA11yLabel: { year: 'numeric', month: 'long' },
  }
};

but when i input manually date with DD/MM/YYYY format i got error of invalid date exemple: 24/08/2019

Answer 1

Here another version of an AppDateAdapter:

export class AppDateAdapter extends NativeDateAdapter {

    parse(value: any): Date | null {
      if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
        const str = value.split('/');
        const year = Number(str[2]);
        const month = Number(str[1]) - 1;
        const date = Number(str[0]);
        return new Date(year, month, date);
      }
      const timestamp = typeof value === 'number' ? value : Date.parse(value);
      return isNaN(timestamp) ? null : new Date(timestamp);
    }

   format(date: Date, displayFormat: string): string {
      if (displayFormat == "input") {
        let day = date.getDate();
        let month = date.getMonth() + 1;
        let year = date.getFullYear();
        return this._to2digit(day) + '/' + this._to2digit(month) + '/' + year;
      } else if (displayFormat == "inputMonth") {
        let month = date.getMonth() + 1;
        let year = date.getFullYear();
        return  this._to2digit(month) + '/' + year;
      } else {
          return date.toDateString();
      }
   }

   private _to2digit(n: number) {
      return ('00' + n).slice(-2);
   } 
}

export const APP_DATE_FORMATS =
{
   parse: {
       dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
   },
   display: {
       dateInput: 'input',
       monthYearLabel: 'inputMonth',
       dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
       monthYearA11yLabel: {year: 'numeric', month: 'long'},
   }
}