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

ionic month picker
ion-datetime
ionic datepicker
ionic 4 time picker
ion datepicker example
datetime format ionic 4
ionic date range picker
ion-datetime get value

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?

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.

ionic - how to translate date month names in ionic 4?, Massive subject area but in short I assume that the textual representations of dates will be rendered by default as per the language settings on  Important: See the Month Names and Day of the Week Names section below on how to use different names for the month and day.. Display Format. The displayFormat property specifies how a datetime's value should be printed, as formatted text, within the datetime component.

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>

Translate not working for ionic date-time. · Issue #458 · ngx-translate , I'm using monthNames="{{ 'MONTHS' | translate }}" or [monthNames]="'MONTHS' | translate" as translation rules of ng2-translate but its not  Setting up Ionic 2 with angular2-translate is pretty simple. But since there were a lot of changes in the recent time and most of the code examples provided in other blogs is already outdated i decided to describe the latest working approach.

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

.....

Date picker in our language - ionic-v3, I would like to know if it is possible to change the month's of a date picker to another language. Get an array of translated day names */ getDayNames(): or you can check it with ionic view if you just want to see it working? I am using ionic2-beta10, but the ion-datetime control have OK and Cancel button, What I need to do to translate these text.

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

How to change name of days & months in ionic2-calendar to local , How to change name of days & months in ionic2-calendar to local language · ionic But now i want to convert it to hijri how can i do it? I want view thats ionic2-calendar with hijri years and add event with moment-hijri. CanKattwinkel / ionic2-translate-example. Watch 2 Star 1 Fork 2 Code. Issues 0. Pull requests 0. Projects 0. Security Insights Name Latest commit message

Angular and Ionic Date & Time Formatting values Example, override possibility. For Angular 2/4/5/6/7/8/9 and Ionic 2/3/4/5. Month only. Month name. Month/year. Day of week. ATOM Day name. </> View demo code. The format of the date displayed in the month view. Default value: 'dd' formatDayHeader The format of the header displayed in the month view. Default value: 'EEE' formatDayTitle The format of the title displayed in the day view. Default value: 'MMMM dd, yyyy' formatWeekTitle The format of the title displayed in the week view.

ionic-selectable, An Ionic component similar to Ionic Select, that allows to search Watch the recordings here! » ionic-selectable. 4.7.1 • Public • Published 3 months ago '​ionic-selectable'; class Port { public id: number; public name: string; }  Calendar Month View: Calendar Week View: Calendar Day View: Calendar with Events: Click the "Load Events" button at the header.. You can add a calendar in ionic using the node module "ionic2-calendar".

Changing the Language on Your Calendar, Trying to translate our free core plugin The Events Calendar? Learn how to do Then find your language in the list and click to view the details. Ionic 2 Lists: Lists are great way display data in row format, Ionic 2 provides various predefined which we can use easily.Here in this tutorial we are going to explain how you can create & use various lists in Ionic 2.