如何自定义ngbDatepicker导航？解决实例差异的实现难题

问题背景 #

我想自定义ngbDatepicker的导航栏，但组件本身没有提供导航自定义模板，于是尝试把自定义组件插入到footerTemplate中，代码示例如下：

<ngb-datepicker
  #dp
  [(ngModel)]="model"
  (navigate)="date = $event.next"
  navigation="none"
  [footerTemplate]="footerCalendar"
/>
<input
  class="form-control"
  placeholder="yyyy-mm-dd"
  name="dp"
  [(ngModel)]="model"
  ngbDatepicker
  #d="ngbDatepicker"
  navigation="none"
  [footerTemplate]="footerCalendar"
/>
<ng-template #footerCalendar>
  <footer-component [dateInputPicker]="dp" />
</ng-template>

但实现导航方法时遇到了问题：从input获取的是NgbInputDatepicker实例，和ngb-datepicker组件的NgbDatepicker实例不是同一个，没法统一处理导航逻辑。

预期要实现的导航效果：顶部显示年月选择框，可直接选择年月，搭配前后跳转按钮，替代原生导航栏。

解决方案 #

核心思路是统一获取真正的NgbDatepicker实例，不管是独立组件还是绑定在input上的实例，具体实现步骤如下：

1. 调整模板传递逻辑 #

修改footer模板，自动传入当前日期选择器的实例，无需手动指定：

<!-- 独立日期选择器 -->
<ngb-datepicker
  #dp
  [(ngModel)]="model"
  (navigate)="date = $event.next"
  navigation="none"
  [footerTemplate]="footerCalendar"
/>
<!-- 带input的日期选择器 -->
<input
  class="form-control"
  placeholder="yyyy-mm-dd"
  name="dp"
  [(ngModel)]="model"
  ngbDatepicker
  #d="ngbDatepicker"
  navigation="none"
  [footerTemplate]="footerCalendar"
/>
<!-- 模板自动传入当前选择器实例 -->
<ng-template #footerCalendar let-datepicker>
  <footer-component [targetPicker]="datepicker" />
</ng-template>

2. 自定义footer组件处理导航逻辑 #

在组件中统一实例类型，调用原生导航方法实现自定义导航：

import { Component, Input, OnInit } from '@angular/core';
import { NgbDatepicker, NgbInputDatepicker } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'footer-component',
  template: `
    <div class="d-flex justify-content-between align-items-center p-2">
      <select [(ngModel)]="selectedYear" (change)="navigateToTarget()">
        <option *ngFor="let year of getYears()" [value]="year">{{year}}</option>
      </select>
      <select [(ngModel)]="selectedMonth" (change)="navigateToTarget()">
        <option *ngFor="let month of getMonths()" [value]="month">{{month}}</option>
      </select>
      <button class="btn btn-sm btn-outline-primary" (click)="navigatePrev()">←</button>
      <button class="btn btn-sm btn-outline-primary" (click)="navigateNext()">→</button>
    </div>
  `
})
export class FooterComponent implements OnInit {
  @Input() targetPicker: NgbDatepicker | NgbInputDatepicker;
  private _pickerInstance: NgbDatepicker;
  selectedYear: number;
  selectedMonth: number;

  ngOnInit() {
    // 统一获取核心NgbDatepicker实例
    this._pickerInstance = this.targetPicker instanceof NgbInputDatepicker 
      ? this.targetPicker.datepicker 
      : this.targetPicker;
    // 初始化当前视图的年月
    const currentView = this._pickerInstance.getNavigateDate();
    this.selectedYear = currentView.year;
    this.selectedMonth = currentView.month;
  }

  // 导航到选中的年月
  navigateToTarget() {
    this._pickerInstance.navigateTo({year: this.selectedYear, month: this.selectedMonth});
  }

  // 上一月
  navigatePrev() {
    this._pickerInstance.navigatePrev();
    // 更新选择框值
    const newView = this._pickerInstance.getNavigateDate();
    this.selectedYear = newView.year;
    this.selectedMonth = newView.month;
  }

  // 下一月
  navigateNext() {
    this._pickerInstance.navigateNext();
    // 更新选择框值
    const newView = this._pickerInstance.getNavigateDate();
    this.selectedYear = newView.year;
    this.selectedMonth = newView.month;
  }

  // 生成年份选项（可自行调整范围）
  getYears() {
    const currentYear = new Date().getFullYear();
    return Array.from({length: 20}, (_, i) => currentYear - 10 + i);
  }

  // 生成月份选项
  getMonths() {
    return Array.from({length: 12}, (_, i) => i + 1);
  }
}

3. 关键说明 #

• NgbInputDatepicker内部的datepicker属性直接指向对应的NgbDatepicker实例，通过这个属性可以统一控制导航
• 使用navigateTo()、navigatePrev()、navigateNext()方法直接调用原生导航逻辑
• 通过getNavigateDate()获取当前视图的年月，用于同步选择框的显示值

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