NGX-bootstrap Datepicker触发setHours相关TypeError报错如何解决

问题描述 #

使用NGX-bootstrap的DatePicker组件时出现类型错误，已提供可复现的简化测试项目。

复现步骤 #

• 通过键盘在DatePicker输入框中输入任意无效值，例如文本asd
• 使输入框失焦，此时输入框会自动填充值为Invalid date
• 重新聚焦输入框，等待日期选择器弹出
• 选中输入框内的Invalid date文本并完全删除

实际报错信息 #

ERROR TypeError: Cannot read properties of undefined (reading 'setHours')
at copyTime (ngx-bootstrap-datepicker.js:2249)
at bsDatepickerReducer (ngx-bootstrap-datepicker.js:2310)
at ngx-bootstrap-mini-ngrx.js:12
at scanInternals.js:11
at OperatorSubscriber._next (OperatorSubscriber.js:9)
at OperatorSubscriber.next (Subscriber.js:31)
at observeOn.js:6
at QueueAction.<anonymous> (executeSchedule.js:3)
at QueueAction._execute (AsyncAction.js:53)
at QueueAction.execute (QueueAction.js:20)

临时解决方案 #

以下三种方案可单独使用，也可组合使用，均能避免该报错：

方案1：输入事件拦截 #

在datepicker绑定的输入框上添加input事件监听，提前拦截无效值，避免流入组件内部：

// 组件类逻辑
onDateInput(event: Event): void {
  const inputEl = event.target as HTMLInputElement;
  const inputVal = inputEl.value;
  // 检测内容是否为无效日期
  if (inputVal === 'Invalid date' || (inputVal && isNaN(new Date(inputVal).getTime()))) {
    // 清空绑定的日期变量
    this.selectedDate = null;
    // 手动清空输入框
    inputEl.value = '';
  }
}

对应模板绑定：

<input
  type="text"
  bsDatepicker
  [(ngModel)]="selectedDate"
  (input)="onDateInput($event)"
>

方案2：全局补丁修复（根源解决） #

在项目入口文件（如main.ts、app.module.ts）顶部添加代码，重写报错的copyTime方法，添加空值校验兜底：

import * as ngxBootstrapDatepicker from 'ngx-bootstrap/datepicker';

// 保存原始copyTime方法
const originalCopyTime = (ngxBootstrapDatepicker as any).copyTime;
// 重写方法添加空值判断
(ngxBootstrapDatepicker as any).copyTime = function(fromDate: Date, toDate: Date) {
  // 任意日期参数为空时直接返回，避免调用setHours报错
  if (!fromDate || !toDate) {
    return toDate ?? null;
  }
  // 参数合法时执行原始逻辑
  return originalCopyTime(fromDate, toDate);
};

方案3：失焦事件清空无效值 #

在输入框失焦时检测内容，若为无效值直接清空：

onDateBlur(event: Event): void {
  const inputEl = event.target as HTMLInputElement;
  if (inputEl.value === 'Invalid date') {
    this.selectedDate = null;
    inputEl.value = '';
  }
}

对应模板绑定：

<input
  type="text"
  bsDatepicker
  [(ngModel)]="selectedDate"
  (blur)="onDateBlur($event)"
>

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