CODEWITHSUNDEEP
angularjsangularionic-frameworkionic2ionic-view
Willian Garcias
Willian Garcias

Reputation: 3

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

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?

Upvotes: 0

Views: 9672

Answers (4)

adenizc
adenizc

Reputation: 421

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();

.....

Upvotes: 1

levolutionniste
levolutionniste

Reputation: 424

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

Upvotes: 0

romulus001
romulus001

Reputation: 318

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>

Upvotes: 1

Gabriel Barreto
Gabriel Barreto

Reputation: 6421

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.

Upvotes: 8

Related Questions