CODEWITHSUNDEEP
angulardatelocalizationhindidate-pipe
Nitin Jain
Nitin Jain

Reputation: 165

Angular2 DatePipe is not formatting according to browser language

I am using angular2 default DatePipe to format date according to browser locale/language.

In my case it always format date according to english language.

app.module.ts    
{
       provide: LOCALE_ID, useValue: "hi"
}

In my custom pipe i created DatePipe object in constructor using DI.

myDatePipe.ts
public constructor(private translate: TranslateService,private datePipe: DatePipe, , @Inject(LOCALE_ID) locale: string)) { 
    console.log(locale); // This log string 'hi'
}

public transform(value: string, format: string) {
    // 'shortTime' format always return value in '5:15 am' format.
    // 'longDate' format always return value in '28 दिसंबर 2017' format.
    return this.datePipe.transform(value, format); 
}

I logged current applied language by logging Locale_ID and it's logged as 'hi'.

Upvotes: 0

Views: 975

Answers (1)

Mike A.
Mike A.

Reputation: 1468

your best bet is to create your own shortDate pipe and use the NGX translate service, pull the browser language in and use that to transform your date. Here's an example of a shortdate pipe i'm using

This is Angular 6, so I'm also using the new formatDate functionality available in @angular/common, 

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

@Pipe({
  name: 'shortDate'
})
export class ShortDatePipe implements PipeTransform {
    constructor(private translateService: TranslateService) { }

    transform(value: string): string {
        var language: string = this.translateService.getBrowserCultureLang();
        console.log(language);
        return (value == "" || value == null) ? "" : formatDate(value, 'shortDate', language);
    }

}

if you're not on angular6, you'll need to import a datePipe, put a datepipe in your constructor and use it's transform

Something like this (not proven, or tested, just off the top of my head)

import { DatePipe } from '@angular/common';
...
    constructor(private translateService: TranslateService, 
                private datePipe: DatePipe ) { }

...
return this.datePipe.transform( value, 'shortDate',language);

Upvotes: 1

Related Questions