Core: [Question]How to use ngx-translate for date DatePipe?

[AlFalahTaieb]

I have an application that it's running in two language ( i can change an choose the language i want bu using i18n) English / French.

At the moment i can get the date only in english even if i select the French Language.

       <div class="information">
                  {{ information.date | information:'EEEE'}} {{information.date | date:'d'}} {{ information.date | date:'MMMM'}} {{ information.date |
                  date:'yyyy'}}
            </div>

Is there a way to change the date depending on what language i selected ?

[clegeard]

Any help on that?

[nkCreation]

Any news ?

[FiReBlUe45]

any news?

[j-langlois]

app.module.ts

// https://angular.io/guide/i18n#i18n-pipes
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

export class AppModule {
    constructor() {
        registerLocaleData(localeFr, 'fr');
    }
}

app.component.html

<!-- https://angular.io/api/common/DatePipe -->
<div class="date">{{ articleDate | date: 'MMM d, y':undefined:locale }}</div>

app.component.ts

locale: string;
constructor(private _translateService: TranslateService) { }

ngOnInit() {
        this.locale = this._translateService.currentLang;
        // don't forget to unsubscribe!
        this._translateService.onLangChange
            .subscribe((langChangeEvent: LangChangeEvent) => {
                this.locale = langChangeEvent.lang;
            })
    }

[Indrajeetsing]

Just modifying @j-langlois answer. Following solution would work in entire application.

app.module.ts

import localeEn from '@angular/common/locales/en';
import localeHe from '@angular/common/locales/he';
import localeHeExtra from '@angular/common/locales/extra/he';

registerLocaleData(localeEn, 'en');
registerLocaleData(localeHe, 'he', localeHeExtra);

localized-date.pipe.ts

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

@Pipe({
  name: 'localizedDate',
  pure: false
})
export class LocalizedDatePipe implements PipeTransform {
  constructor(private translateService: TranslateService) {}

  transform(value: any, pattern: string = 'mediumDate'): any {
    const datePipe: DatePipe = new DatePipe(this.translateService.currentLang);
    return datePipe.transform(value, pattern);
  }
}

Now you can use it in entire application. When you change language it will change locale in entire application. Also you can send format to pipe as well otherwise default format is mediumDate.

<div class="date">{{ createAt | localizedDate}}</div>

[pyrrhicman]

awesome, Thanks to @Indrajeetsing solution and it's the way.
I just edited a bit and it might be more "Angular way"

@Pipe({
name: 'localizedDate',
pure: false
})
export class LocalizedDatePipe implements PipeTransform {
constructor(private translateService: TranslateService, private datePipe: DatePipe) {}

transform(value: any, pattern: string = 'mediumDate'): any {
return this.datePipe.transform(value, pattern, undefined, this.translateService.currentLang);
}
}

Just add DatePipe to your sharedModule providers (because we are using DatePipe in component ) and LocalizedDatePipe to sharedModule declarations.

[Danubius1st]

I have a more complicated case:

• en-US pattern is: 2020/10/20

• fr-FR pattern is: 20/10/2020

I think that it should be a way to extend standard date format, but I can't figure out.

[tonysamperi]

@Danubius1st you have to use a DateAdapter

[Danubius1st]

Good hint. Thanks!