Angular 2 Datepipe formatting based on browser location/settings

Question

Is there a way to make the datepipe dynamic so that if it's an American browser the datepipe returns the American format (yyyy/MM/dd) and when it's a European browser it returns the European format (dd/MM/yyyy)?

Thanks

score 4 · Accepted Answer · answered Aug 08 '17 at 07:26

4

This can be hard, especially when using aot. It would normally require you to make different builds. I extended the datapipe and use the browsers locale.

Datepipe:

@Pipe({name: 'datepipe', pure: true})
export class MyDatePipe extends DatePipe implements PipeTransform {
  constructor(private win: WindowRef) {
    super(win.ln);
  }

  transform(value: any, pattern?: string): string | null {
    return super.transform(value, pattern);
  }
}

Window:

function _window(): any {
  // return the global native browser window object
  return window;
}

@Injectable()
export class WindowRef {
  get nativeWindow(): any {
    return _window();
  }

  public ln = 'en';


  constructor() {
    try {
      if (!isNullOrUndefined(this.nativeWindow.navigator.language) && this.nativeWindow.navigator.language !== '') {
        this.ln = this.nativeWindow.navigator.language;
      }
    }finally {}
  }
}

answered Aug 08 '17 at 07:26

Robin Dijkhof

18,665
11
65
116

Sorry for my ignorance but what do you mean exactly with window? is that just a window.ts file? How do i implement this in my Angular project? – Martijn van den Bergh Aug 08 '17 at 07:48
1

It is a simple service – Robin Dijkhof Aug 08 '17 at 08:13
What is `isNullOrUndefined` ? My editor doesn't recognize it. – Martijn van den Bergh Aug 09 '17 at 13:02
2

`import {isNullOrUndefined} from 'util';` – Robin Dijkhof Aug 09 '17 at 13:04

score 2 · Answer 2 · answered Jun 14 '18 at 04:11

2

I think you should use native JS API Date.prototype.toLocaleDateString() to achieve this goal. See this link.

You can implement your own Angular pipe to use this API.

answered Jun 14 '18 at 04:11

steamfood

474
3
10

ZAhmed · Answer 3 · 2017-08-08T07:51:25.267

0

You can check the location and put it in if statement Yes you can use pipe like this :

     <div *ngif="Location() === 'Europe' "
     {{valueDate | date: 'dd/MM/yyyy'}}
     <div>
     <div *ngif="Location() === 'Ammerica' "
     {{valueDate | date: 'MM/dd/yyyy'}}
     <div>

To find location

getCurrentLocation(lat,lng): Observable<any> {
return this._http.get("http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lng+"&sensor=true")
  .map(response => response.json())
  .catch(error => {
    console.log(error);
    return Observable.throw(error.json());
  });

}

edited Aug 08 '17 at 07:51

answered Aug 08 '17 at 07:13

ZAhmed

1,232
8
15

Could you please explain how i can check the location? Dont i need permission from the user to do that? – Martijn van den Bergh Aug 08 '17 at 07:44
1

I edit the code above , see the code , I hope it is useful – ZAhmed Aug 08 '17 at 07:51
Thanks for the answer, i think this will also work indeed. But i do think the answer from Robin Dijkhof is a little better because it looks for the language in the browser settings. Nevertheless this will also work, so thanks! – Martijn van den Bergh Aug 08 '17 at 08:16

score -1 · Answer 4 · answered Oct 14 '19 at 10:18

I know that this may seem nasty but it's way simpler than begging Angular to do it for you:

public renderLocaleDateTime(date: Date, dateStyle = 'medium', timeStyle = 'medium'): string {
    var script = 'const date = new Date("' + date + '"); const options = { dateStyle: "' + dateStyle + '", timeStyle: "' + timeStyle + '" }; date.toLocaleString({}, options);';
    return eval(script);
}

And then:

<span title="{{ renderLocaleDateTime(date, 'long', 'long') }}">
    {{ renderLocaleDateTime(date) }}
</span>

Or even better, make it a pipe.

Angular 2 Datepipe formatting based on browser location/settings

4 Answers4

Linked