关于调整ng-bootstrap datepicker年份选择范围的技术咨询

阿华AIGC实验室

2026-5-6

修改ng-bootstrap Datepicker年份选择器的显示范围

没问题！ng-bootstrap的Datepicker完全支持自定义年份选择器的显示范围，默认的「当前年份前后各10年（共21年）」只是默认配置，咱们可以轻松改成1900到2100的全范围，下面给你两种常用方案：

方案一：直接通过`minDate`和`maxDate`限制范围（简单高效）

这是最直接的方法，不仅能修改年份选择器的显示范围，还能同时限制用户选择这个区间外的日期，一举两得。

在你的模板中给ngb-datepicker添加[minDate]和[maxDate]属性：

<ngb-datepicker #dp [(ngModel)]="selectedDate" 
  [minDate]="{year: 1900, month: 1, day: 1}" 
  [maxDate]="{year: 2100, month: 12, day: 31}">
</ngb-datepicker>

设置后，年份选择器只会加载并显示1900到2100之间的所有年份，用户也无法选择这个范围外的日期。

方案二：自定义年份选择器模板（灵活可控）

如果你需要更灵活的控制（比如只想修改年份显示范围、不想限制日期选择，或者要自定义年份的样式/逻辑），可以通过ng-template覆盖默认的年份选择器模板。

步骤1：在组件类中生成年份数组

先在你的组件.ts文件里生成1900到2100的年份列表：

// 组件.ts文件
yearRange: number[] = Array.from({ length: 201 }, (_, index) => 1900 + index);
// 201是因为2100-1900+1=201个年份

步骤2：在模板中自定义年份选择器

用ng-template替换默认的年份头部和年份项：

<ngb-datepicker #dp [(ngModel)]="selectedDate">
  <!-- 自定义年份头部（保留上下导航箭头） -->
  <ng-template ngbDatepickerYearHeader let-ref="ref">
    <button class="btn btn-sm btn-outline-secondary" (click)="ref.navigateTo({year: 1899})">&lsaquo;</button>
    <span class="mx-2">选择年份</span>
    <button class="btn btn-sm btn-outline-secondary" (click)="ref.navigateTo({year: 2101})">&rsaquo;</button>
  </ng-template>
  <!-- 自定义年份项渲染 -->
  <ng-template ngbDatepickerYear let-year let-selected="selected" let-select="select">
    <button class="btn btn-sm"
            [class.active]="selected"
            (click)="select(year)">
      {{ year }}
    </button>
  </ng-template>
</ngb-datepicker>

这种方式可以完全自定义年份的展示逻辑，比如添加年份分组、高亮特定年份等，适合个性化需求。