Question

当我从数据库中获取日期时遇到问题。我从Web服务中以字符串格式获取日期，然后我想显示给日期选择器的输入，但是日期未显示在我的字段中。当我慰问生日时，就像这样02/02/1997 00:00:00。如何将日期格式设置为日期选择器格式？

这是我的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，其行为取决于您使用的适配器。由于您的数据库返回了非标准的字符串格式，因此无法使用Existing item...。您应该尝试使用NativeDateAdapter。

DatePicker Angualar材料，角度5

1 个答案: