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

Question

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

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

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

HTML代码：

<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>

Angular 组件的代码：

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 material 以及他们如何努力工作。

Answer 2

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

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

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

Answer 3

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

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

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

Return format of date in console isn't the same like in input

date

angular-date-format

angular