Angular Bootstrap DateTimePicker功能异常及控制台报错咨询

问题1：选择上月日期后重新打开选择器，弹窗显示当前月 #

这个问题的核心是选择器的viewDate没有和选中的日期同步，默认会保持初始的当前月份。

修复步骤：

• 在组件类中新增viewDate变量，初始化为当前日期：

  viewDate: Date = new Date();
  

• 绑定模板中的选择器viewDate属性到该变量：

  <ngb-datepicker [(ngModel)]="selectedDate" [viewDate]="viewDate"></ngb-datepicker>
  

• 监听日期选择事件，同步更新viewDate为选中的日期：

  onDateSelected(date: Date) {
    if (date) {
      this.viewDate = new Date(date);
    }
  }
  

  或者直接在模板中通过事件绑定简化更新：

  <ngb-datepicker [(ngModel)]="selectedDate" [viewDate]="viewDate" (dateSelect)="viewDate = $event"></ngb-datepicker>
  

问题2：更改日期时控制台报错 #

从报错场景推测，大概率是日期变量未初始化（为null/undefined），或者处理日期时未做空值校验，导致调用Date方法时抛出异常。

修复步骤：

1. 初始化日期变量：确保绑定的ngModel变量初始化为合法的Date对象，而非空值：

   selectedDate: Date = new Date();
   

2. 添加空值校验：在所有处理日期的逻辑中（比如格式化、计算），先判断日期是否有效：

   getFormattedDate(): string {
     if (!this.selectedDate) return '';
     return `${this.selectedDate.getFullYear()}-${this.selectedDate.getMonth()+1}-${this.selectedDate.getDate()}`;
   }
   

3. 检查组件配置冲突：如果设置了minDate/maxDate，确保选中的日期在允许范围内，避免组件内部因日期越界抛出错误。

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