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!

score 1 · Accepted Answer · answered Dec 19 '18 at 18:09

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

answered Dec 19 '18 at 18:09

Suresh Kumar Ariya

9,516
1
18
27

1

Is it possible to get the application to use different files on the fly or is it something static. I say that mainly because I want to be able to change the language of it within the same app and looking at the examples it seems that it actually builds the application with the translations? – Carlos Torrecillas Jan 25 '19 at 09:02
have you found a solution for dynamically change the tooltips? – user2622344 Jul 13 '20 at 14:26
Any update regarding this – Hasini Nov 03 '21 at 13:11

ngb-datepicker change tooltips language

1 Answers1