Угловой реактивный Материал формы Выбор даты Формат ввода вручную: ДД / ММ / ГГГГ

Question

Я хочу изменить формат ввода datePicker, по умолчанию - ММ / ДД / ГГГГ, я хочу изменить его на ДД / ММ / ГГГГ. HTML-код:

<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' },
  }
};

, но когда я вручную вводил дату в формате ДД / ММ / ГГГГ, я получал ошибку недопустимой даты, пример: 24/08/ 2019

Answer 1

Здесь другая версия 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'},
   }
}

Answer 2

попробуйте, если это работает для вас, пожалуйста, примите ответ:)

import * as moment from 'moment'; 

   const momentDateDebut = new Date(this.dateDebut)
   const formattedDateDebut = moment(momentDateDebut).format("DD/MM/YYYY");