DatePicker Angular 材质，Angular 5

Question

当我从数据库中获取日期时遇到问题。我从我的网络服务中获取字符串格式的日期，然后我想显示到我的日期选择器的输入中，但日期没有显示在我的字段中。当我安慰生日时，就像这样 02/04/1997 00:00:00。如何将日期格式化为 datepicker 格式？

这是我的html

 <div class="mb-24" fxLayout="row">
              <mat-form-field fxFlex>
                <input matInput [(ngModel)]="client.Birthday" formControlName="Birthday" placeholder="Ditëlindja" [matDatepicker]="picker" tabindex="3">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
              </mat-form-field>
            </div>

当我得到包括生日在内的客户列表时，这是我的 apiService

  Client(): Observable<Client[]> {
    return this._http.get<Client[]>('http://localhost:1636/BOXService.asmx/Client');
  }

这是我在文件 .ts 中的表格

 createClientForm() {
    return this.formBuilder.group({
      Birthday: [this.client.Birthday],

这是我的适配器

const dateFormat = "DD/MM/YYYY";
export class AppDateAdapter extends NativeDateAdapter {

  format(date: Date, displayFormat: Object): string {
    if (displayFormat == "input") {
      return moment(date).format(dateFormat);
    } else {
      return date.toDateString();
    }
  }
}

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

请问有人可以帮我吗？如何格式化日期以填充我的日期选择器字段？

Answer 1

根据doc，行为取决于您使用的适配器。 NativeDateAdapter 不能在您的情况下使用，因为您的数据库返回的非标准字符串格式。您应该尝试改用MomentDateAdapter。