Angular - 使用带有 ngModel 的日期管道答案

【问题标题】：Angular - using a date pipe with ngModelAngular - 使用带有 ngModel 的日期管道
【发布时间】：2022-02-08 19:20:01
【问题描述】：

我在控制台中收到以下错误 - “错误：InvalidPipeArgument: 'Unable to convert "[object Object]" into a date' for pipe 'DatePipe'”。

我有一个日历输入，它应该允许用户选择一个日期，然后以某种格式传递该日期，“dd/MM/yyyy”。一旦他们选择了日期，我希望所选日期显示在日历输入中。

我意识到如果我有一个管道，我不能在 [ngModel] 上进行两种方式绑定，所以我正在使用（ngModelChange）。如果我删除 #createdByCutOffDate="ngModel" 则错误将被删除，但我无法在日历输入中看到所选日期。

我还尝试了采用日期类型或字符串的 updateCreatedByCutOffDate() 方法。

this.createdByCutOffDate 采用以下格式 - 'Thu Feb 17 2022 00:00:00 GMT+0000（格林威治标准时间）'

component.html


<input type="date"
       id="createdByCutOffDate"
       [ngModel]="createdByCutOffDate | date:'dd/MM/yyyy'"
       #createdByCutOffDate="ngModel"
       (ngModelChange)="updateCreatedByCutOffDate($event)" />

组件.ts


createdByCutOffDate: Date;

updateCreatedByCutOffDate(date: string) {
    this.createdByCutOffDate = new Date(date);

    }

【问题讨论】：

标签： html angular date input date-pipe

【解决方案1】：

createdByCutOffDate 是一个 Date 对象，它有自己的方法和属性。
所以要解决您的问题，请使用"createdByCutOffDate.date | date:'dd/MM/yyyy'" 而不是"createdByCutOffDate | date:'dd/MM/yyyy'"

【讨论】：

太棒了！感谢那！我没看到有人提到过。欣赏！
不客气 :)
已经这样做了 - 在您标记为已接受之前有一个时间限制，因此延迟
是的，我明白了，没关系