HTML Date Picker 不接受 Angular 中的 DateTime 类型答案

【问题标题】：DateTime type in angular is not accepted by HTML Date PickerHTML Date Picker 不接受 Angular 中的 DateTime 类型
【发布时间】：2020-09-26 08:22:33
【问题描述】：

我有一个以 DateTime 为类型的模型。我正确地从 webapi 获取值。但是当我将它作为创建响应式表单的默认值放在我的输入字段中时，输入不会反映该值。请参阅下面的代码：

型号

export class Vehicle {
  id?: number;
  code: string;
  plateNumber: string;
  type: string;
  dateAcquired?: Date;
  datePosted?: Date;
  registrationMonth?: string;
  addedBy?: number;
}

 createForm(): void {
    if (this.vehicle !== null) {
      this.codeControl = new FormControl(this.vehicle.code, {
        validators: [Validators.required],
        updateOn: 'blur'
      });
      this.plateNumberControl = new FormControl(this.vehicle.plateNumber, {
        validators: [Validators.required],
        updateOn: 'blur'
      });
      this.typeControl = new FormControl(this.vehicle.type, {
        validators: [Validators.required],
        updateOn: 'blur'
      });
      this.dateAcquiredControl = new FormControl(this.vehicle.dateAcquired, {
        validators: [Validators.required],
        updateOn: 'blur'
      });
      this.registrationMonthControl = new FormControl(this.vehicle.registrationMonth, {
        validators: [Validators.required],
        updateOn: 'blur'
      });
    } 
}

HTML

<div class="row">
        <div class="col-md-6 pr-1">
          <div class="form-group">
            <label>Date Acquired</label>
            <input
              type="date"
              class="form-control"
              [formControl]="dateAcquiredControl"
              />
          </div>
        </div>

来自 API 的示例结果

创建的表单缺少日期

编辑

使用给我的建议，我想我已经接近解决方案了。但还没有。

【问题讨论】：

标签： angular

【解决方案1】：

您也可以尝试使用moment-timezone

import * as moment from 'moment-timezone';

...

this.dateAcquiredControl = new FormControl(
  moment(this.vehicle.dateAcquired).format(
    'YYYY-MM-DD'
  ), {
  validators: [Validators.required],
  updateOn: 'blur'
});

【讨论】：

先生，'received_at' 是什么。我收到一个错误
复制代码时点击错误。我已经编辑了
先生，我收到“15/09/2020”的指定值不符合所需格式“yyyy-MM-dd”的错误。多一点帮助请。
啊，好吧，把格式改成下面这样。我更新了答案
对不起，这次它告诉我'指定值'yyyy-09-Tu'不符合要求的格式“yyyy-MM-dd”

【解决方案2】：

这就是它在我的日期模板中的工作方式：

<ng-template #dateTmpl let-row="row" let-value="value">
  {{ value | date: 'yyyy-MM-dd HH:mm' }}
</ng-template>

如果这对您没有帮助，您能否提供现有的 html？

【讨论】：

现在我明白了，谢谢。请使用我的第二个答案，我认为它应该对您有所帮助。

【解决方案3】：

您必须将日期时间字符串转换为日期选择器所需的格式。这是一个无需使用矩即可应用的解决方案。

console.log(new Date('2020-09-26T15:35:36.111608').toISOString().split('T')[0]);

【讨论】：

这很好，但它给了我一个错误'指定的值“9/15/2020”不符合要求的格式，“yyyy-MM-dd”。'
你以为你在 dd/mm/yyyy 格式中使用它。我更新了我的答案。希望这对你有用。
这实际上很棒，因为您不必使用 moment。不过，只有一件事，这一天落后了 1 天。如果是 2020 年 9 月 16 日，则变为 2020 年 9 月 15 日。嗯...