如何从日期中截断时间并将其传递给组件？

Question

我有这个问题：

从后端我获取以下格式的日期：

2022-05-20

（本地日期）

当我想编辑表单上的日期时，出现错误：

Internal Server Error Text '2023-04-29T22:00:00.000Z' could not be parsed, unparsed text found at index 10.

我收到错误，因为没有来自后端的时间，只有日期本身，并且 Angular 中的组件也在传递时间和日期，无法处理此问题。

我准备了这样一个函数来解析：

function format(date: Date, dateFormat?: string): string;

在我看来，应该在单击表单上的“保存”按钮之前解析日期？

  protected onSubmit(): void {
        if (this.form?.invalid) {
            return;
        }

        this.service.save(person, this.form.value).subscribe({
            next: () => {
                this.result$.next(true);
                this.bsModalRef.hide();
                this.toastrService.success(
                    this.translate.instant('save.message'),
                );
            },
            error: error => (this.errorMessage)
        });

    }

Answer 1

我认为这是一个 Angular 工作区。

如果您想以编程方式格式化日期，请查看：https://stackblitz.com/edit/stackblitz-starters-row3uy?file=src%2Fmain.ts

import { DatePipe } from '@angular/common';
import { Component, inject } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
   <p>dateOne: {{ dateOne | date : 'YYYY-MM-dd' }}</p>
   <p>dateTwo: {{ dateTwo | date : 'YYYY-MM-dd' }}</p>
   <p>dateTwo: {{ dateThree }}</p>
  `,
  providers: [DatePipe],
  imports: [DatePipe],
})
export class App {
  datePipe = inject(DatePipe);

  dateOne = '2023-04-29T22:00:00.000Z';
  dateTwo = new Date(this.dateOne);
  dateThree = this.datePipe.transform(this.dateTwo, 'YYYY-MM-dd');
}