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

Question

im working on Angular 13 project with bootstrap 4. i want to show a datePicker feild using ngbdatepicker but my datePicker does'nt show the two dropdown in the top (list of months and list of years). this is my code:

    <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>

and this is my shared module :

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

And this is my formatter 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}`
      : "";
  }
}

when i click on the datepicker field i have this error in the console :

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.

do you have any idea why i have this datepicker without list of years and months ?

Regards.

Answer 1

it was problem of i18n since i want to show the months in French. i resolved the problem by running :

npm install @angular/localize --save

Then import '@angular/localize/init' in your polyfills.ts