2

I am using angular date pipe for date formatting. I want to format date based on user/client locale. For example 'mm/dd/yyyy' for English US(en-US) and dd.mm.yyyy for German(de-de). Angular have format options like short, medium and long. They do not match the locale default format. If i go for customized date format, I do not have the locale separator. Intl DateTimeFormat provides the exact formatted date. Is there any way to achieve this with angular date pipe?

srinivas
  • 109
  • 1
  • 3
  • 14
  • Does this help? https://angular.io/guide/i18n#i18n-pipes – ShamPooSham Feb 18 '20 at 12:10
  • no @ShamPooSham. I am able to dynamically load locale data. My problem is with date formatting. i want to use date pipe to get locale specific default date format like dd.mm.yyyy. Which is not provided in angular format options. – srinivas Feb 18 '20 at 13:29
  • I understand your problem is with date formatting. If you read the guide, you can see that this applies to DatePipe. Loading the locale data is one thing, and setting LOCALE_ID is another thing. If you set LOCALE_ID to 'de-DE', you should get the correct format. LOCALE_ID can either be set with the `--i18nLocale` option in ng build, or providing a new one during bootstrap (https://angular.io/api/core/LOCALE_ID) – ShamPooSham Feb 18 '20 at 14:03
  • 1
    If you don't want to set LOCALE_ID, but simply set format in runtime, you can do it like this: `dateVar | date : undefined : undefined : 'de-DE'`. – ShamPooSham Feb 18 '20 at 14:05
  • https://stackblitz.com/edit/angular-7zxz5k?file=src%2Fapp%2Fapp.component.html – ShamPooSham Feb 18 '20 at 14:05
  • In the above stackblitz link try to print the date alone without time. That is the my actual problem. Thanks for help ShamPooSham. – srinivas Feb 18 '20 at 15:40
  • No problem. I created an answer now – ShamPooSham Feb 18 '20 at 16:00

1 Answers1

14

**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.

The first thing to make sure is that you have loaded the locale data. You can do this in `app.module.ts` as stated in the documentation: 
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
ShamPooSham
  • 2,301
  • 2
  • 19
  • 28
  • 4
    Thanks for solution. `{{myDate | date : undefined : undefined : 'de-DE' }}` is the code i needed. – srinivas Feb 18 '20 at 16:54