Core: localization - format number and date

Created on 2 Feb 2017 · 6Comments · Source: ngx-translate/core

I cannot find the feature to do localization for number and date. Do I miss something? If not, will that be implemented in the future? I thing it is easy to do that. I suggest to use the ECMAScript Internationalization API - Init. Check Init here: https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Intl

thanks,

Source

xiejiabao

👍3

Most helpful comment

FWIW - the following worked for me for dates. I assume the number related pipes would be equally trivial:

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';
import { TranslateService } from '@ngx-translate/core';

@Pipe({
  name: 'localizedDate',
  pure: false  // required to update the value when currentLang is changed
})
export class LocalizedDatePipe implements PipeTransform {
  private value: string|null;
  private lastDate: any;
  private lastLang: string;

  constructor(private translate: TranslateService) { }

  transform(date: any, pattern: string = 'mediumDate'): any {
    const currentLang = this.translate.currentLang;

    // if we ask another time for the same date & locale, return the last value
    if (date === this.lastDate && currentLang === this.lastLang) {
      return this.value;
    }

    this.value = new DatePipe(currentLang).transform(date, pattern);
    this.lastDate = date;
    this.lastLang = currentLang;

    return this.value;
  }
}

rdukeshier on 14 Jul 2017

👍6 👀1

All 6 comments

Why dont you use the angular pipes date and number? They follow locale of the language set as LOCALE_ID following the Intl.js lib

providers: [{
  provide: LOCALE_ID, useValue: 'fr',
}]

emoralesb05 on 7 Feb 2017

👍1

@emoralesb05 but the date pipe only can be used in chrome and opear

of course it is due to the Init API is limited to browser so far.

And we may would like to do the translation using the same way but no using different pipe.

Is it possible to consider develop localization for date and number in ng2-translate?

xiejiabao on 8 Feb 2017

You can use the intl polyfill to make it work everywhere...
Yes date & numbers are probably going to be in this lib one day, but I don't know when. If you want to make a PR for it, it'd be nice!

ocombe on 8 Feb 2017

FWIW - the following worked for me for dates. I assume the number related pipes would be equally trivial:

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';
import { TranslateService } from '@ngx-translate/core';

@Pipe({
  name: 'localizedDate',
  pure: false  // required to update the value when currentLang is changed
})
export class LocalizedDatePipe implements PipeTransform {
  private value: string|null;
  private lastDate: any;
  private lastLang: string;

  constructor(private translate: TranslateService) { }

  transform(date: any, pattern: string = 'mediumDate'): any {
    const currentLang = this.translate.currentLang;

    // if we ask another time for the same date & locale, return the last value
    if (date === this.lastDate && currentLang === this.lastLang) {
      return this.value;
    }

    this.value = new DatePipe(currentLang).transform(date, pattern);
    this.lastDate = date;
    this.lastLang = currentLang;

    return this.value;
  }
}

rdukeshier on 14 Jul 2017

👍6 👀1

@rdukeshier keep in mind that setting the pipe pure property to false can create performance issues depending on many date pipes you are using. The pipe will get re-evaluated whenever a change-detection occurs.