ngbDatepicker设置当前月份和年份下拉列表

<!-- app.component.html -->
<input class="form-control" placeholder="yyyy/mm/dd" (dateSelect)="onDateSelect($event)" [ngbDatepicker]="dp" #d="ngbDatepicker">
<button class="btn btn-outline-primary calendar" (click)="d.toggle()" type="button"></button>

<ng-template #dp let-date="date" let-focused="focused">
  <div class="datepicker">
    <ngb-datepicker-navigation [date]="date" [disabled]="disabled" (navigate)="changeMonth($event)"></ngb-datepicker-navigation>
    <ngb-datepicker-month-view [date]="date" [disabled]="disabled" (monthSelect)="changeYear($event)"></ngb-datepicker-month-view>
  </div>
</ng-template>

// app.component.ts
import { Component } from '@angular/core';
import { NgbDateStruct, NgbCalendar } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  model: NgbDateStruct;
  date: { year: number; month: number };

  constructor(private calendar: NgbCalendar) {}

  onDateSelect(date: NgbDateStruct) {
    console.log('Selected date: ', date);
  }

  changeMonth(event: any) {
    this.date = { year: event.year, month: event.month };
  }

  changeYear(event: any) {
    this.date = { year: event.year, month: event.month };
  }
}

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgbModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

<input class="form-control" placeholder="yyyy/mm/dd" (dateSelect)="onDateSelect($event)" [ngbDatepicker]="dp" #d="ngbDatepicker" dropdownMode="monthyear">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">