How to Set Locale in Datepipe in Angular 2

How to set locale in DatePipe in Angular 2?

As of Angular2 RC6, you can set default locale in your app module, by adding a provider:

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "en-US" }, //replace "en-US" with your locale
    //otherProviders...
  ]
})

The Currency/Date/Number pipes should pick up the locale. LOCALE_ID is an OpaqueToken, to be imported from angular/core.

import { LOCALE_ID } from '@angular/core';

For a more advanced use case, you may want to pick up locale from a service. Locale will be resolved (once) when component using date pipe is created:

{
  provide: LOCALE_ID,
  deps: [SettingsService],      //some service handling global settings
  useFactory: (settingsService) => settingsService.getLanguage()  //returns locale string
}

Hope it works for you.

Dynamically change locale for DatePipe in Angular 2

Using providers you can change your default locale in your NgModule.
to do this You need to import LOCALE_ID from angular/core and fetch your locale language to pass the same to providers.

import { LOCALE_ID } from '@angular/core';

@NgModule({
    imports: [//your imports],
    providers: [
        { provide: LOCALE_ID, useValue: "en-US" }
    ]
})

...
...
{
  provide: LOCALE_ID,
  deps: [SettingsService],      //some service handling global settings
  useFactory: (settingsService) => settingsService.getLanguage()  //returns locale string
}

Hope this will help you.

Format date as dd/MM/yyyy using pipes

Pipe date format bug fixed in Angular 2.0.0-rc.2, this Pull Request.

Now we can do the conventional way:

{{valueDate | date: 'dd/MM/yyyy'}}

Examples:

Current Version:

Example Angular 13

Old Versions:

Example Angular 8.x.x

Example Angular 7.x

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x

More info in documentation DatePipe

Why angular date pipe do not support locale language default format like Intl.DateTimeFormat?

**EDIT**

I can't see that the recent Angular docs mention registerLocaleData, so I assume it can be ignored now, so you can skip the first part. I guess Angular figures out which locales you use automatically, or all locale data is bundled into Angular.

import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';

registerLocaleData(localeDe);

Then, you have two alternatives.

1. You can set the LOCALE_ID variable to your preferred locale (de-DE in your case). This can be done either by using the --i18nLocale flag in ng build or ng serve, or it can be done by providing a value during bootstrap (see documentation). If you use this, the date will be formatted according to that locale's rules anywhere you use it.
2. You can set the locale as the third parameter in DatePipe. If you use this approach, it will only affect that specific usage of the date pipe. The parameters are separated by :, and if you want the default behavior for some prior parameter you can set it to undefined. The following example shows the date and time using the de-DE date format without using any timezone offset: myDate | date : 'medium' : undefined : 'de-DE'. Check out this stackblitz for more examples

Related Topics