Ngb DatePicker日期跨月更新后日历视图未同步切换对应月份

核心原因 #

NgbCalendar.getNext() 仅做日期算术计算，返回新的日期实例，不会自动触发日期选择器的视图导航逻辑。日期选择器的当前显示月份由组件内部的导航状态独立维护，和选中日期值不是强绑定关系，因此仅更新选中日期不会自动切换视图。

排查步骤 #

• 检查是否在更新日期值后，同步触发了日历组件的导航操作
• 检查日期更新逻辑是否在 Angular 变更检测上下文内执行，若在zone外执行需要手动触发变更检测
• 检查是否直接修改了原有NgbDate实例的属性（NgbDate为不可变对象，直接修改属性不会触发值更新检测）

修复方案 #

方案1：调用日期选择器实例的导航方法（推荐） #

首先通过ViewChild获取页面上的日期选择器实例：

import { NgbDatepicker, NgbDate, NgbCalendar } from '@ng-bootstrap/ng-bootstrap';

// 对应模板上 #dp="ngbDatepicker" 的实例
@ViewChild('dp') datepicker: NgbDatepicker;

在日期计算逻辑完成后，同步调用导航方法跳转到对应月份：

var newDate = new NgbDate(this.deliveryDate.year,this.deliveryDate.month,this.deliveryDate.day)
let date = this.calendar.getNext(newDate,"d",1)
// 更新绑定的选中日期
this.deliveryDate = date;
// 导航到新日期所在月份
this.datepicker.navigateTo({ year: date.year, month: date.month });

方案2：同步更新绑定的起始显示日期 #

如果模板中通过[startDate]属性控制日历默认显示月份，更新选中日期时同步修改该绑定值即可触发视图切换：

// 模板对应写法：<ngb-datepicker [startDate]="calendarStart" [(ngModel)]="deliveryDate"></ngb-datepicker>
let date = this.calendar.getNext(newDate,"d",1)
this.deliveryDate = date;
// 同步更新起始显示日期
this.calendarStart = { year: date.year, month: date.month };

注意：所有日期更新操作必须赋值新的NgbDate实例，禁止直接修改原有实例的year/month/day属性，否则无法触发Angular的变更检测。

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