Date picker in our language

Ionic Framework ionic-v3
1

Hi,

I would like to know if it is possible to change the month’s of a date picker to another language. And how?

Thanks

2

According to the docs:

import {ionicBootstrap} from 'ionic-angular';

ionicBootstrap(MyApp, customProviders, {
  monthNames: ['janeiro', 'fevereiro', 'mar\u00e7o', ... ],
  monthShortNames: ['jan', 'fev', 'mar', ... ],
  dayNames: ['domingo', 'segunda-feira', 'ter\u00e7a-feira', ... ],
  dayShortNames: ['dom', 'seg', 'ter', ... ],
});
2 Likes
3

I got it working with the translation plugin like this:

In my page controller:

this.dayNames = this.settings.getDayNames();
this.dayShortNames = this.settings.getDayShortNames();
this.monthNames = this.settings.getMonthNames();
this.monthShortNames = this.settings.getMonthShortNames();

Where settings.getDayNames() for example looks like this:

 /**
   * Get an array of translated day names
   */
  getDayNames(): Array<string> {
	  return [
	          this.translate.instant('date:day:1:long'),
	          this.translate.instant('date:day:2:long'),
	          this.translate.instant('date:day:3:long'),
	          this.translate.instant('date:day:4:long'),
	          this.translate.instant('date:day:5:long'),
	          this.translate.instant('date:day:6:long'),
	          this.translate.instant('date:day:7:long')
	  ];
  }

Then in the template:

<ion-datetime
    displayFormat="MMMM/DD/YYYY"
    ngControl="date"
    [dayNames]="dayNames"
    [dayShortNames]="dayShortNames"
    [monthNames]="monthNames"
    [monthShortNames]="monthShortNames"
    [doneText]="translate.instant('done')"
    [cancelText]="translate.instant('cancel')"
></ion-datetime>
5 Likes
4

Would you be able to provide a small github repo to demo this?
I’m not 100% if this would work, but I’d like to be sure before I open an issue.

5

I don’t have time to create a demo right now, but it is working in my project. What kind of issue would you be expecting?

6

I can share my app repo with you if you want to check that out… or you can check it with ionic view if you just want to see it working?

7

Hi!

Sorry about the late answer. The method of @rapropos is working fine, however, the @beck24 method seems to be the best.

8

How do you define the ‘customProviders’? I tried to define the customProviders in ionicBootstrap, but I get an error ‘[ts] cannot find name ‘customProviders’

9

customProviders is being passed as an argument to the ionicBootstrap function, so it needs to be defined before you get to that function.

10

Right. But how do you define it? What package in ionic?

11

It’s a placeholder for an array of services in your app that you want DI to manage. You don’t actually type “customProviders”.

12

Sorry for the bump but could you explain (or giving a link for a tutorial) how to use it? I never used this kind of things and the documentation does not provide any working example so I’m a little bit lost.

Thanks

13

I don’t understand this example. Which file that code should be written, app.module.ts? Ionic-angular doesn’t have a member called ionicBootstrap.

14

Things have changed quite a bit since that was written. The docs haven’t been updated, so I opened this issue.

15

I just modify the following files in order to set my own languaje

MyApp\node_modules\ionic-angular\es2015\util\datetime-util.js
MyApp\node_modules\ionic-angular\util\datetime-util.js
MyApp\node_modules\ionic-angular\umd\util\datetime-util.js

16

Manually editing things under node_modules is not a sustainable solution.

17

According to this comment: https://github.com/ionic-team/ionic-site/issues/905#issuecomment-266465147, you can set those strings globally. I hope someday it could be done with the “OK”, “Cancel”, “Done” texts of other inputs…

2 Likes
18

You can use the next example I’m using in my app to get an idea of how to set multiple language variables in your app.component.ts
If you subscribe to one of the variables, you can now use translateService.instant safely (if a variable finished loading, all of the variables in the same file should be loaded)

    this.translateService.get('_back').subscribe(value => {
      this.config.set('ios', 'backButtonText', value);
      this.config.set('monthNames', [
        this.translateService.instant('_january'),
        this.translateService.instant('_february'),
        this.translateService.instant('_march'),
        this.translateService.instant('_april'),
        this.translateService.instant('_may'),
        this.translateService.instant('_june'),
        this.translateService.instant('_july'),
        this.translateService.instant('_august'),
        this.translateService.instant('_september'),
        this.translateService.instant('_october'),
        this.translateService.instant('_november'),
        this.translateService.instant('_december')
      ]);
      this.config.set('monthShortNames', [
        this.translateService.instant('_janshort'),
        this.translateService.instant('_febshort'),
        this.translateService.instant('_marshort'),
        this.translateService.instant('_aprshort'),
        this.translateService.instant('_mayshort'),
        this.translateService.instant('_junshort'),
        this.translateService.instant('_julshort'),
        this.translateService.instant('_augshort'),
        this.translateService.instant('_sepshort'),
        this.translateService.instant('_octshort'),
        this.translateService.instant('_novshort'),
        this.translateService.instant('_decshort')
      ]);
    });
19

I’ve solved with this! (this will change date in italian language)
Open app.module.ts on “src/app” and write this:

import { NgModule } from “@angular/core”;
import { LOCALE_ID } from ‘@angular/core’;
import { registerLocaleData } from ‘@angular/common’;
import localeIt from ‘@angular/common/locales/it’;
registerLocaleData(localeIt);

then on @NgModule you need to write this on providers:
provide: LOCALE_ID, useValue: “it”.

This is an example:

@NgModule({
imports: […],
declarations: […],
bootstrap: […],
providers: [
{ provide: LOCALE_ID, useValue: ‘it’},
]
})

export class AppModule {}

thanks me later :wink: :*