0

我已将日期设置为格式化 yyyy-MM-dd，我需要让我的组件返回这样的日期。在输入字段中，一切正常，例如 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)
  }

我将不胜感激任何帮助！

4

3 回答 3

0

在发布到后端之前，我会使用 moment.js 来格式化我的日期。请检查一下它可能会对您有所帮助http://momentjs.com/。我不太了解 Angular 材料以及它们如何工作。

于 2019-02-07T20:59:06.890 回答
0

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

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

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

于 2019-02-07T21:19:45.843 回答
0

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

new DatePipe('en-US').transform(this.form.value.endDate, 'yyyy-MM-dd')
于 2019-02-08T09:56:57.110 回答