控制台中日期的返回格式与输入中的日期不同

Question

我已经设置了我的日期来格式化 yyyy-MM-dd，我需要让我的组件像这样返回日期。在输入字段中一切正常，例如 2020-10-03，但是当我尝试console.log()时，我得到这个：

endDate: Sat Oct 03 2020 00:00:00 GMT+0300 (IDT)

而且我只需要与数据库输入相同的字符串。

网页代码：

<mat-form-field color="accent">
    <mat-label>End date</mat-label>
    <input matInput
           [matDatepicker]="endDate"
           [formControl]="form.get('endDate')"
           [errorStateMatcher]="matcher"
    >
    <mat-error *ngIf="form.get('endDate').hasError('required')">
      End date is <strong>required</strong>
    </mat-error>
    <mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
    <mat-datepicker #endDate color="primary"></mat-datepicker>
  </mat-form-field>

角度组件代码：

export const PICK_FORMATS = {
  parse: {dateInput: {year: 'numeric',month: 'numeric', day: 'numeric'}},
  display: {
    dateInput: 'input',
    dateAllyLabel: {year: 'numeric', month: 'numeric', day: 'numeric'},
  }
}
export class PickDateAdapter extends NativeDateAdapter {
  format(date: Date, displayFormat: Object): string {
    if (displayFormat === 'input') {
      return new DatePipe('en-US').transform(date, 'yyyy-MM-dd')
    } else {
      return date.toString()
    }
  }
}
@Component({
  selector: 'app-update-coupon',
  templateUrl: './update-company-coupon.component.html',
  styleUrls: ['../../../app/shared/layouts/company/company.component.css'],
  providers: [
    {provide: DateAdapter, useClass: PickDateAdapter},
    {provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS}
  ]
})
export class UpdateCompanyCouponComponent {
  form = new FormGroup({
    id: new FormControl('', [
      Validators.required
    ]),
    endDate: new FormControl('', [
      Validators.required
    ]),
    price: new FormControl('', [
      Validators.min(1),
      Validators.required
    ]),
    amount: new FormControl('', [
      Validators.min(1),
      Validators.required
    ])
  })
  onSubmit() {
    console.log(this.form.value)
  }

我将不胜感激任何帮助！

Answer 1

我会使用 moment.js 在发布到后端之前格式化我的日期。请检查一下它可能会帮助您 http://momentjs.com/。我对 Angular 材料以及它们如何坚固工作知之甚少。

Answer 2

正如Sandeep回答的那样，您可以使用像Moment.js这样的库来格式化Dates，甚至这样的东西应该可以工作。

this.form.value.endDate.toLocaleDateString("en-US");

但是，通常会将完整的 Date 对象上载到数据库，因为它是一种更通用和标准的格式。这应该不是问题，下次从数据库中检索数据并将完整对象加载到前端时，它的格式会很好。

Answer 3

下面的两个答案都可以解决问题，但我只是找到了更简单的方法，适合我。我使用了@angular/common DatePipe，它返回我需要的值。此外，无论您在网站上输入什么日期格式，它都会返回 yyy-MM-dd .

new DatePipe('en-US').transform(this.form.value.endDate, 'yyyy-MM-dd')