IONIC2 - How to translate the names of months in the view

Question

I have a problem with ionic2 in translating the names of months into another language from another country. In my views I use the filter date to display the full name of the month. The names of the months appear in the English language and I need them to appear in the Portuguese language of Brazil.

When I used ionic1 I just accessed the file 'ionic.bundle.min.js' and from there I changed the name of the months that were in English. Already for the ionic2 I still do not know how I should do to change the language of the months.

Can anyone help me with this?

Answer 1

You can use the monthShortNames and/or monthNames attribute on your ion-datetime tag

<ion-item>
  <ion-datetime displayFormat="DD/MMM/YYYY HH:mm" pickerFormat="DD MMM YYYY HH mm" monthShortNames='jan, fev, mar, abr, mai, jun, jul, ago, set, out, nov, dez' doneText="Ok" cancelText="Cancelar"></ion-datetime>
</ion-item>
<ion-item>
  <ion-datetime displayFormat="DD/MMMM/YYYY HH:mm" pickerFormat="DD MMMM YYYY HH mm" montNames='janeiro, fevereiro, março, abril, maio, junho, etc...' doneText="Ok" cancelText="Cancelar"></ion-datetime>
</ion-item>

If you want to show short names, your picker and display format must be MMM and for for long names it must be MMMM.

You can use both together, like MMM in the picker and MMMM for display.

The same goes for dayNames and dayShortNames .

This is only for showing purpouses, in your .ts file they'll be in ISO string format, if you want to manipulate them to appear later in portuguese i would recommend using Moment.js to change the locale to 'pt-br' and showing it on your view. If you need help with this too, leave a comment and i'll edit showing how to do this.

Answer 2

Other solution, open your app.module.ts file, you will have to complete the Imports key this way :

imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp, {
  monthNames: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'aout', 'septembre', 'octobre', 'novembre', 'décembre' ],
  monthShortNames: ['jan', 'fev', 'mar', 'avr', 'mai', 'jui', 'jui', 'aou', 'sep', 'oct', 'nov', 'dec' ],
  dayNames:['dimanche','lundi','mardi','mercredi','jeudi','vendredi','samedi'],
 }),
IonicStorageModule.forRoot()
]

In your html page, your ion-dateime tag will be used this way :

<ion-datetime displayFormat="DDDD D MMMM YYYY" min="2017" max="2099-12-31" cancelText="Annuler" doneText="Valider" [(ngModel)]="DateDebut"></ion-datetime>

Answer 3

Don't forget to add a list for the dayShortNames if you use the short version like me

imports: [
HttpModule,
BrowserModule,
IonicModule.forRoot(MyApp, {
    monthNames: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'aout', 'septembre', 'octobre', 'novembre', 'décembre' ],
    monthShortNames: ['jan', 'fev', 'mar', 'avr', 'mai', 'jui', 'jui', 'aou', 'sep', 'oct', 'nov', 'dec' ],
    dayNames:['dimanche','lundi','mardi','mercredi','jeudi','vendredi','samedi'],
    dayShortNames:['dim','lun','mar','mer','jeu','ven','sam'],
}),

as describe in the official description on Ionic

Answer 4

I have used with momentjs. it supports multilingual.

<ion-datetime formControlName="birthdate"  [(ngModel)]="birthdate" [monthNames]="monthNames" [monthShortNames]="monthShortNames"></ion-datetime>

in .ts file

import moment from 'moment';

.....

    this.monthNames = moment.months();
    this.monthShortNames = moment.monthsShort();

.....