防止 angular2 应用程序因无效日期而崩溃（可能覆盖 DatePipe？）

Question

我基本上有这样一个 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**
}

太棒了。还有很多事情正在发生，但可能是无关紧要的细节。

麻烦的是你可以点击日期选择器，比如 select 年份，然后点击删除，它会这样做：

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

ORIGINAL EXCEPTION: Invalid argument '' for pipe 'DatePipe'

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

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

谢谢！

Answer 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);
  }
}

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

防止 angular2 应用程序因无效日期而崩溃（可能覆盖 DatePipe？）

Prevent angular2 app from crashing due to invalid date (maybe override DatePipe?)

validation

date

datepicker

angular2-pipe

angular