1

我基本上有一个这样的 HTML5 日期选择器：

<input class="form-control" type="date" [(ngModel)]="startDate" />

另一个区域显示来自模型的日期，如下所示：

{{startDate | date:shortDate}}

我认为这与这个问题无关，但要彻底，我在幕后有这样的事情：

private startDate: string;
private endDate: string;

updateDateFilter() {
    let from = new Date(this.startDate);
    let to = new Date(this.endDate);
    **Stuff to filter based on date range**
}

这很棒。还有很多事情要做，但可能是无关紧要的细节。

问题是你可以点击日期选择器，比如说，选择年份并点击删除，这样做：

坏日期

没问题吧？错了，因为 Angular2 日期管道变得混乱，我的整个应用程序在显示这个非常有用的错误消息后崩溃：

原始异常：管道“DatePipe”的参数“无效”

解决方案似乎很简单，但我不知道如何去做。我想我只需要在 DatePipe 处理它之前捕获日期字符串，并确保日期、月份和年份的有效内容。但是 Angular2 确实很神奇，而且因为它是使用模型绑定完成的，所以我看不到明确的干预途径。

我可能需要覆盖 DatePipe，保留其功能但首先检查字符串。我不知道怎么做。如果您知道如何做到这一点，请分享。任何替代方法也会有所帮助。只要日期不完整，我就不能让应用程序崩溃。

谢谢！

4

1 回答 1

1

您可以创建自己的管道并扩展默认 DatePipe 或只是实例化它并以编程方式调用它。

@Pipe({
  name: 'customDate'
})
export class CustomDatePipe extends DatePipe {
  transform(date: string, pattern?: string): string {
    // validate/initialize date
    return super.transform(date, pattern);
  }
}

或者第二种情况：

export class CustomDatePipe {
  private datePipe: DatePipe = new DatePipe();

  transform(date: string, pattern?: string): string {
    // validate/initialize date
    return this.datePipe.transform(date, pattern);
  }
}

没有机会检查这一点，但我认为这两种方法都应该有效。

于 2016-08-29T20:18:41.883 回答