ngb-datepicker change tooltips language

Question

I've got a multi-language app which uses a custom NgbDatePickerI18n:

@Injectable()
export class CustomDatepickerService extends NgbDatepickerI18n {

    constructor(private translateService: TranslateService) {
        super();
    }

    getWeekdayShortName(weekday: number): string {
        return I18N_VALUES[this.translateService.getLanguage()].weekdays[weekday - 1];
    }

    getMonthShortName(month: number): string {
        return I18N_VALUES[this.translateService.getLanguage()].months[month - 1];
    }

    getMonthFullName(month: number): string {
        return this.getMonthShortName(month);
    }

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

all works fine however when I hover over the previous/next month button, and the drop downs to select the month/year I can see a little tooltip in English. I'd like to translate that. Looked at the actual code: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/datepicker-navigation.ts#L15 and the documentation https://ng-bootstrap.github.io/#/components/datepicker/overview#i18n about internationalization, it is not very clear to me how to achieve that. I can see the following:

The next/previous button labels can be translated using the standard Angular i18n mechanism. For example, previous month label is extracted under the ngb.datepicker.previous-month name.

But like I say, I can't find a little example of how to integrate that inside my CustomDatepickerService. Could anyone give me a little example about how to achieve this assuming it's possible?

Many thanks!

Answer 1

You can refer i18n Internalization Angular docs https://angular.io/guide/i18n#internationalization-i18n

Need to follow Custom Ids and create .xlf file with these below tags.

<trans-unit id="ngb.datepicker.previous-month" datatype="html">
  <source>Previous Month</source>
  <target state="new">Translated Text</target>
</trans-unit> 

Then you need to hook this .xlf into ng build script.

Reference : https://medium.com/frontend-fun/angular-introduction-to-internationalization-i18n-28226a85e04e

https://angular-templates.io/tutorials/about/angular-internationalization-i18n-multi-language-app