Angular 13 ngbdatepicker 不显示月份和年份的下拉列表

Question

我在 Angular 13 项目上工作 bootstrap 4. 我想使用 ngbdatepicker 显示一个 datePicker feild 但我的 datePicker 没有在顶部显示两个下拉列表（月份列表和年份列表）。这是我的代码：

    <div class="input-group flex-nowrap">
       <div class="input-group-wrapper">
           <input class="form-control" id="date3"  ngbDatepicker #d3="ngbDatepicker">
           <label for="date3">Date</label>
       </div>
       <div class="input-group-append">
           <button class="btn btn-link calendar far fa-calendar" (click)="d3.toggle()"></button>
       </div>
   </div>

这是我的共享模块：

@NgModule({
 imports: [
   NgbModule
 ],
 exports: [
  CommonModule, //
  NgbModule
 ],
 declarations: [],
 providers: [
  { provide: LOCALE_ID, useValue: 'fr-FR' },
  { provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter }
 ]
})
export class SharedModule {}

这是我的格式化程序 class :

import {NgbDateParserFormatter,  NgbDateStruct,} from "@ng-bootstrap/ng-bootstrap";
import { Injectable } from "@angular/core";
import { isNumber,toInteger,  padNumber,} from "@ng-bootstrap/ng-bootstrap/util/util";

@Injectable()
export class NgbDateCustomParserFormatter extends NgbDateParserFormatter {
  parse(value: string): NgbDateStruct {
    if (value) {
      const dateParts = value.trim().split("-");
      if (dateParts.length === 1 && isNumber(dateParts[0])) {
        return { day: toInteger(dateParts[0]), month: null, year: null };
      } else if (
        dateParts.length === 2 &&
        isNumber(dateParts[0]) &&
        isNumber(dateParts[1])
      ) {
        return {
          day: toInteger(dateParts[0]),
          month: toInteger(dateParts[1]),
          year: null,
        };
      } else if (
        dateParts.length === 3 &&
        isNumber(dateParts[0]) &&
        isNumber(dateParts[1]) &&
        isNumber(dateParts[2])
      ) {
        return {
          day: toInteger(dateParts[0]),
          month: toInteger(dateParts[1]),
          year: toInteger(dateParts[2]),
        };
      }
    }
    return null;
  }

  format(date: NgbDateStruct): string {
    return date
      ? `${isNumber(date.day) ? padNumber(date.day) : ""}-${
          isNumber(date.month) ? padNumber(date.month) : ""
        }-${date.year}`
      : "";
  }
}

当我单击日期选择器字段时，我在控制台中出现此错误：

ERROR Error: It looks like your application or one of its dependencies is using i18n.
Angular 9 introduced a global `$localize()` function that needs to be loaded.

你知道为什么我有这个没有年月列表的日期选择器吗？

此致。

Answer 1

这是 i18n 的问题，因为我想用法语显示月份。我通过运行解决了这个问题：

npm install @angular/localize --save

然后 import '@angular/localize/init' 在你的 polyfills.ts

Angular 13 ngbdatepicker 不显示月份和年份的下拉列表

Angular 13 ngbdatepicker doesn't show dropdown of months and years

angular

ngb-datepicker