ANGULAR使用ionic2-calendar保存事件报getFullYear空值错误

问题原因 #

你遇到的报错不是ionic2-calendar包安装异常导致的，核心原因是代码传入了无效的日期参数，组件在渲染日程时尝试对null调用getFullYear方法才触发该异常。

具体问题点 #

• 初始化未触发事件加载：你定义了loadEvents方法生成随机日程，但ngOnInit生命周期钩子中没有调用该方法，初始状态下如果没有其他逻辑触发事件加载，部分版本的组件在处理空数据源时会触发异常。
• 新增日程缺少合法性校验：模态框返回新增日程数据后，你没有校验startTime和endTime是否为合法的Date对象，如果模态框中用户未选择时间、或者返回的时间是字符串/null类型，就会导致渲染时调用日期方法失败。
• 额外小问题：onEventSelected方法中使用了event.desc字段，但你生成的随机日程、以及模态框返回的日程对象中都没有定义该字段，点击日程时会显示undefined。

解决方案 #

1. 补全初始化加载逻辑，在ngOnInit中调用loadEvents方法：

ngOnInit() {
  this.loadEvents();
}

2. 新增日程前增加合法性校验，避免传入无效时间：

modal.onDidDismiss().then((result) => {
  if (result.data && result.data.event) {
    let event = result.data.event;
    // 校验开始时间合法性
    if (!event.startTime || !(event.startTime instanceof Date) || isNaN(event.startTime.getTime())) {
      this.alertCtrl.create({
        header: '操作失败',
        message: '请选择有效的开始时间',
        buttons: ['确定']
      }).then(alert => alert.present());
      return;
    }
    // 校验结束时间合法性
    if (!event.endTime || !(event.endTime instanceof Date) || isNaN(event.endTime.getTime())) {
      this.alertCtrl.create({
        header: '操作失败',
        message: '请选择有效的结束时间',
        buttons: ['确定']
      }).then(alert => alert.present());
      return;
    }
    // 校验开始时间早于结束时间
    if (event.startTime.getTime() >= event.endTime.getTime()) {
      this.alertCtrl.create({
        header: '操作失败',
        message: '结束时间必须晚于开始时间',
        buttons: ['确定']
      }).then(alert => alert.present());
      return;
    }
    if (event.allDay) {
      let start = event.startTime;
      event.startTime = new Date(
        Date.UTC(
          start.getUTCFullYear(),
          start.getUTCMonth(),
          start.getUTCDate()
        )
      );
      event.endTime = new Date(
        Date.UTC(
          start.getUTCFullYear(),
          start.getUTCMonth(),
          start.getUTCDate() + 1
        )
      );
    }
    this.eventSource.push(event);
    this.myCal.loadEvents();
  }
});

3. 如果修改后还是报错，可先注释掉模态框新增日程的逻辑，仅保留初始化加载随机日程的逻辑测试，如果没有报错就说明问题出在CalModalPage的返回值，重点检查该页面中startTime和endTime的赋值逻辑，确保返回的是Date类型而非字符串或空值。

内容的提问来源于stack exchange，提问作者jlyw03