angular - 如何将 Angular 语言环境日期转换为 API 使用的正确日期格式？

Question

我在模板驱动的表单中使用双向绑定：

ts：

searchLeaveApplication: any = {};

html:

<mat-form-field class="searchInputs">
  <input
    matInput
    [matDatepicker]="searchStartDate"
    [(ngModel)]="this.searchLeaveApplication.startDate"
    name="startDate"
  />
  <mat-datepicker-toggle
    matSuffix
    [for]="searchStartDate"
  ></mat-datepicker-toggle>
  <mat-datepicker #searchStartDate></mat-datepicker>
</mat-form-field>

但是我得到这个日期：

作为 API（.Net 核心）的日期格式是不可接受的。如何将格式更改为正确的日期格式？我想我不能在双向绑定中使用日期管道。

Answer 1

您始终可以将 Angular 的DatePipe或FormatDate导入您的 component.ts，并转换searchLeaveApplication.startDate为 .Net 核心接受的所需日期时间格式。可在此处找到预定义选项和自定义格式的完整列表。

1）如果您打算使用DatePipe，您可以执行以下操作。

import { DatePipe } from '@angular/common';

export class SampleComponent implements OnInit {   

constructor(private datePipe: DatePipe) {}

  saveData() {
    const searchStartDateString = this.datePipe.transform(this.searchLeaveApplication.startDate, 'yyyy-MM-dd');
    // handle the rest
  }
}

不要忘记将 DatePipe 添加到模块中的提供程序。

providers: [DatePipe]

2）或者，您可能想要使用formatDate：

import { formatDate } from '@angular/common';

export class SampleComponent implements OnInit {

  constructor(@Inject(LOCALE_ID) private locale: string) {}

  saveData() {
    const searchStartDateString = formatDate(this.searchLeaveApplication.startDate, 'MM-yyyy', this.locale);
    // handle the rest
  }
}