Angular 12使用ng-bootstrap日期选择器打开时年份显示错误求助

问题排查及解决步骤 #

• 首先校验依赖版本匹配关系：Angular 12.2.x 必须搭配 ng-bootstrap 10.x 版本使用，且该版本要求 Bootstrap 最低为 4.5.0，你当前使用的 Bootstrap 4.3.1 版本过低，可能存在样式和交互兼容性问题，建议先升级Bootstrap到4.5.x后验证问题是否复现。
• 重点排查自定义日期解析器逻辑：你自定义替换了NgbDateParserFormatter实现类NgbDateParser，该类的parse方法是日期字符串转NgbDateStruct的核心逻辑，你的现象大概率是该方法内的年份转换规则错误导致：比如对两位年份补全为四位年份时，阈值设置错误（例如将年份后两位小于12的补为20xx、大于等于12的补为19xx，或反之），导致2011年12月之后的日期被错误转换年份。可以在parse方法内打印返回值的year字段确认转换结果是否正确。
• 校验组件初始化逻辑：在writeValue方法中打印入参value和赋值后的selectedDate.year，确认父组件传入的初始日期、以及转换后的日期结构体年份是否符合预期，若入参本身错误需要排查父组件的传值逻辑。
• 可添加临时规避配置：给ngbDatepicker添加[startDate]属性，手动指定弹窗初始打开时默认显示的年月，示例代码如下：

<input class="form-control" name="dp" [(ngModel)]="selectedDate" ngbDatepicker #d="ngbDatepicker" 
[startDate]="{year: 2021, month: 1, day: 1}"
(change)="onDateChange($event.target.value)" (dateSelect)="onDateSelect($event)" [disabled]="isDisabled ? 'disabled' : null">

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