Angular 18中NgbDatepicker日期名称偏移一天问题求助

问题现状 #

• NgbDatepicker显示的日期名称与实际日期偏移1天：表头标注的周一（Lun）位置实际对应周日（Dom），以此类推；例如7月15日实际为周一，但组件显示为周日
• ng-bootstrap官网的日期选择器demo也出现相同错误

已尝试的无效操作 #

• 调整firstDayOfWeek属性：错误同步偏移，无法修正日期与名称的对应关系
• 设置应用本地化为西班牙语（es）：无任何变化
• 卸载重装ng-bootstrap组件：问题依旧

排查与解决步骤 #

1. 检查系统/浏览器时区与区域设置 #

官网demo也出错的话，大概率是本地浏览器的系统区域或时区配置异常：

• 切换浏览器区域设置为es-ES，并重启浏览器测试
• 检查系统时区是否设置正确，避免使用跨国际日期变更线的时区（如UTC-12/UTC+14）

2. 独立组件模式下正确注册本地化配置 #

Angular 18独立组件需显式注入ng-bootstrap的本地化提供器，模块方式的配置不生效：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideNgbDatepickerConfig, NgbDatepickerI18n, NgbDatepickerI18nEs } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    // 配置一周起始日：0=周日，1=周一，根据需求调整
    provideNgbDatepickerConfig({ firstDayOfWeek: 1 }),
    // 注册西班牙语本地化
    { provide: NgbDatepickerI18n, useClass: NgbDatepickerI18nEs }
  ]
});

3. 验证Angular与ng-bootstrap版本兼容性 #

确保使用的ng-bootstrap版本完全兼容Angular 18，安装最新稳定版：

npm install @ng-bootstrap/ng-bootstrap@latest

避免使用beta/RC版本，这类版本可能存在未修复的时区计算bug

4. 自定义本地化类修正偏移（临时方案） #

若以上方案无效，可自定义NgbDatepickerI18n子类手动修正日期名称映射：

import { NgbDatepickerI18nEs } from '@ng-bootstrap/ng-bootstrap';

export class CustomEsDatepickerI18n extends NgbDatepickerI18nEs {
  getWeekdayShortName(weekday: number): string {
    // 修正1天偏移：原weekday 0=周日，调整后对应正确的名称索引
    const adjustedWeekday = (weekday + 1) % 7;
    return super.getWeekdayShortName(adjustedWeekday);
  }
}

然后在providers中替换为自定义类：

{ provide: NgbDatepickerI18n, useClass: CustomEsDatepickerI18n }

5. 检查全局时区配置 #

确认应用是否强制设置了异常的时区，比如通过LOCALE_ID或第三方日期库（如moment.js/date-fns）修改了全局时区，这类配置会影响NgbDatepicker的日期计算

内容的提问来源于stack exchange，提问作者Ceta Centro de Estudios de Tec