Ng boostrap datepicker extend language i18 angular, typescript

Question

I am trying to extend language of datepicker, ngBootstrap datepicker, and found this solution

Use a ng-bootstrap internationalized datepicker in an input

That think it is working ok, but I use new typescript version and have error on compile, this is what I have done

custom-datepicker-i18n.service.ts

import { Injectable } from '@angular/core';
import { NgbDatepickerI18n, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

const I18N_VALUES = {
  'es': {
    weekdays: ['L', 'M', 'M', 'J', 'V', 'S', 'D'],
    months: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
  }
  // other languages you would support
};

// Define a service holding the language. You probably already have one if your app is i18ned. Or you could also
// use the Angular LOCALE_ID value
@Injectable()
export class I18n {
  language = 'es';
}

@Injectable()
export class CustomDatepickerI18nService extends NgbDatepickerI18n {

  constructor(private _i18n: I18n) {
    super();
  }

  getWeekdayShortName(weekday: number): string {
    return I18N_VALUES[this._i18n.language].weekdays[weekday - 1];
  }
  getMonthShortName(month: number): string {
    return I18N_VALUES[this._i18n.language].months[month - 1];
  }
  getMonthFullName(month: number): string {
    return this.getMonthShortName(month);
  }

  getDayAriaLabel(date: NgbDateStruct): string {
    return `${date.day}-${date.month}-${date.year}`;
  }
}

my-component.ts

import { Component, OnInit } from '@angular/core';

import { NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap';
import { CustomDatepickerI18nService, I18n } from 'src/app/services/ngbpicker/custom-datepicker-i18n.service';


@Component({
  selector: 'app-mi-perfil',
  templateUrl: './mi-perfil.component.html',
  styleUrls: ['./mi-perfil.component.css'],
  providers: [I18n,{provide: NgbDatepickerI18n, useClass: CustomDatepickerI18nService}]
})
export class MyComponent implements OnInit {
  
  constructor() {}

  ngOnInit(): void {}

}

But in custom-datepicker-i18n.service.ts I got some errors on compile

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ en: { weekdays: string[]; months: string[]; }; fr: { weekdays: string[]; months: string[]; }; nl: { weekdays: string[]; months: string[]; }; }'. No index signature with a parameter of type 'string' was found on type '{ en: { weekdays: string[]; months: string[]; }; fr: { weekdays: string[]; months: string[]; }; nl: { weekdays: string[]; months: string[]; }; }'.ts(7053)

Ng boostrap datepicker extend language i18 angular, typescript

0 Answers0