Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can I change the months display language in the title? #338

Open
damtaipu opened this issue Oct 10, 2021 · 1 comment
Open

How can I change the months display language in the title? #338

damtaipu opened this issue Oct 10, 2021 · 1 comment

Comments

@damtaipu
Copy link

Ionic version: (check one with "x")
[ ] 2.x
[ ] 3.x
[ X ] 4.x

Ion2-calendar mode: (check one with "x")
[ X ] components mode
[ ] modal mode

I'm submitting a ... (check one with "x")
[ ] bug report
[ ] feature request
[X] help me

Current behavior:
It is currently displayed like this:
jan, feb, mar, apr, mai, jun, jul, ago, sep, oct, nov, dec

Captura de Tela 2021-10-10 às 09 29 40

Expected behavior:
How can I change and customize the language of the month that is displayed in the title. I want it to display:
"Jan, Fev, Abr, Mai, Jun, Jul, Ago, Set, Out, Nov, Dez."
In Brazilian Portuguese.

Note: First letter in uppercase

I made a workaround changing it directly on calendar.component.js, adding: moment.locale('pt-br'), as shown in the image below (line 309):
Captura de Tela 2021-10-10 às 10 08 51

Well, I think there must be a correct way to change this.

@heliomarpm
Copy link

Hi @damtaipu, maybe it's too late, but here is an example for future reference.

PS. I waited a long time for the update to fix the limitation in the 1970's selection, as this repository is abandoned I decided to create my own version.
https://github.com/heliomarpm/ion-calendar

Coming back to your problem, it can be solved this way.

  • In the .ts code, fill in your options
public calendarOptions: CalendarComponentOptions = {
    from: new Date(-1, 0, 1),
    color: 'secondary',
    monthPickerFormat: ['JAN', 'FEV', 'MAR', 'ABR', 'MAI', 'JUN', 'JUL', 'AGO', 'SET', 'OUT', 'NOV', 'DEZ'],
    weekdays: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
    pickMode: 'single',
    showYearPicker: true,
  };
  • In your html you assign the option values:
<ion-calendar  [options]="calendarOptions" format]="'YYYY-MM-DD'" ... >
</ion-calendar>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants