Сборщик угловых данных с пользовательскими форматами и фильтрацией доступных дней

Question

Я бы хотел добиться эффекта, аналогичного https://material.angular.io/components/datepicker/examples,, где формат моей даты похож на последний пример «Выбор даты с пользовательскими форматами». Однако у меня уже работает «Datepicker с проверкой фильтра», а также «Datepicker с проверкой минимума и максимума». Эти двое используют JavaScript Date () для создания даты, и она отлично работает. Но объединить все это вместе мне трудно, так как отображаемый формат находится в данный момент, в то время как макс / мин / проверка фильтра использует новый Date () JS. Было бы неплохо сохранить его, и поверх этого просто отображать такую ​​отфильтрованную дату, но в формате момента, как в «Datepicker с пользовательскими форматами».

Редактировать: добавлен исходный код

contact.component.html

<mat-form-field>
  <input
    matInput
    [matDatepicker]="deadlineDatepicker"
    [matDatepickerFilter]="filterAvailableDays"
    [max]="maxDate"
    [min]="currentDate"
    formControlName="formControlDeadline"
    aria-label="Click here to choose a deadline for your project."
    placeholder="Project deadline"
    title="Project deadline"
  />
  <mat-hint
    >Specify when at latest you would like to have the project
    done.</mat-hint
  >
  <mat-error *ngIf="!contactForm.get('formControlDeadline')!.valid"
    >This date is <strong>out of our scope</strong>.
  </mat-error>
  <mat-datepicker-toggle
    matSuffix
    [for]="deadlineDatepicker"
  ></mat-datepicker-toggle>
  <mat-datepicker touchUi="true" #deadlineDatepicker></mat-datepicker>
</mat-form-field>

contact.component.ts

export class ContactComponent {
  public currentDate: Date = new Date();

  // Create max deadline dynamically 5 years from now.
  public day: number = this.currentDate.getDate();
  public month: number = this.currentDate.getMonth();
  public year: number = this.currentDate.getFullYear();
  public maxDate: Date = new Date(this.year + 5, this.month, this.day);

  constructor(private formBuilder: FormBuilder) {
    this.contactForm = this.formBuilder.group({
      formControlDeadline: ''
    });
  }

  /**
   * @description Filter available days in the datepicker to choose.
   * @param {d} - instance of date.
   * @returns {boolean}
   */
  public filterAvailableDays = (d: Date): boolean => {
    const day = d.getDay();
    return day !== 0 && day !== 6; // Prevent Saturday and Sunday from being selected.
  };
}