NbDatePicker don't show some names in Spanish

Question

my problem is than I use the component Nb-DatePicker in my project, I used {provide: LOCALE_ID, useValue: "es-MX"} in my app.component to show in spanish, but if February, April, May, August or December are selected are not showed, I think than it must be related to the translation but I don't know, when I delete the line {provide: LOCALE_ID, useValue: "es-MX"} it works fine, what could I do to show the names in Spanish and get over the problem?

Answer 1

I made a little stackblitz

In app.module I add

import '@angular/common/locales/global/es-MX';

And in provider your:

providers:[{ provide: LOCALE_ID, useValue: 'es-MX' }]

I also need add in the polyfills.ts this line (But I think that is because is a stackblitz)

import '@angular/localize/init';  //<---see if you need add this line

The other way is create a CustomDateAdapter and CustomDateParserFormatter (if you want to input the date using, e.g. dd/mm/yyyy and a DatepickerEsMX that extends from NgbDatepickerI18n to "translate" the month names and weekdays names (the DateAdapter and DatePArser is explained in this old SO, the use of extends NgbDatePickerI18 is explain in the example of the docs (*)

providers: [{ provide: LOCALE_ID, useValue: 'es-MX' },
            {provide: NgbDateAdapter, useClass: CustomDateAdapter},
            {provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}
            { provide: NgbDatepickerI18n, useClass: DatepickerEsMx },

(*) The DatePickerEsMX can be like

@Injectable()
export class DatepickerEsMX extends NgbDatepickerI18n {

  constructor(@Inject(LOCALE_ID) private localeId: string) {
        super();
    }

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

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