Angular: How to display a date in French format

Question

I am an Angular beginner, I read the documentation of Angular, and it's hard for such an elementary thing... I want that the dates and other things in my application have the French locale, and not the default 'en-US'...

I started to read this Angular documentation, that seems a little bit incomplete, cause, I did the doc states, and failed:

>...\ClientApp>ng serve --configuration=fr
Configuration 'fr' could not be found in project 'ClientApp'.

OK, now I look on another documentation page on the Date pipe. It states:

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

but ANY example on how to use the locale, so, I tried to do it in a test application link, like this {{myDate | date: 'medium': undefined : 'fr'}} but it displays nothing... I have in the console:

ERROR
Error: InvalidPipeArgument: 'Missing locale data for the locale "fr".' for pipe 'DatePipe'

what else should I do or install to display in Angular a date in the French format?

Angular CLI: 6.1.5
Node: 8.11.1
OS: win32 x64
Angular: 6.1.8

Answer 1

Try adding to your app module the following code

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

// the second parameter 'fr' is optional
registerLocaleData(localeFr, 'fr');

https://angular.io/guide/i18n#i18n-pipes

EDIT: Then if you want to sets this locale as default you need to set the LOCALE_ID injection token as 'fr' like that :

{provide: LOCALE_ID, useValue: 'fr' }

In your app module

Hope it helps

Answer 2

The answer depends on the version of angular that you are using. You have to provide for the LOCALE which you will be using.The default LOCALE is configured as en-US and for all others, you have to manually add the same as providers. Only the way of providing for the LOCALES differs in the angular versions. Check the below:

1. Angular 5 and above:

   Add the following lines in your app.module.ts:

   import { registerLocaleData } from '@angular/common';
   import localeFr from '@angular/common/locales/fr';
   registerLocaleData(localeFr, 'fr');
   

2. Below Angular 5:

   Add the following lines in your app.module.ts:

   import { LOCALE_ID } from '@angular/core';
   
   @NgModule({
       imports : [],
       providers: [ { provide: LOCALE_ID, useValue: "fr-FR" }]
       //Your code
   })
   

Answer 3

Simply try this(french format: [Day name] [Day number] [Month name] [Year number])

{{myDate | date:'EEEE, d,MMMM, y'}}

if you dont want day name remove 'EEEE' from pipe

OR

1. update your module.ts

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

   import { registerLocaleData } from '@angular/common';

   import localeFr from '@angular/common/locales/fr';

   registerLocaleData(localeFr);

   .....

   @NgModule({

   ..... providers: [ {provide: LOCALE_ID, useValue: "fr-CA" } ]

   })

will do the work

Answer 4

The Internet seems to agree with Jahnavi Paliwal's answer on this point, however I believe we are now supposed to be setting it via angular.json file and FETCHING it (if we need to) via the LOCALE_ID provider. If you do the following then the Date Pipe and Angular Material DatePicker (etc.) will use the correct Locale out of the box without having to manually change LOCALE_ID in your Module definition.

"projects": {
  "myProject": {
    "projectType": "application",
    ...
    },
    "i18n": {
      "sourceLocale": "en-GB" // <-- specify your preferred default
    },
    "architect": {
      "build": {
        ...
        "options": {
          "localize": true, // <-- tell Angular to check
          ...
          "aot": true,
          "outputPath": "dist",

Answer 5

Using Pipes and No other installations.

LocalizedDatePipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { Locale } from 'src/app/contentful/interfaces/locale';

@Pipe({
  name: 'localizedDate',
})
export class LocalizedDatePipe implements PipeTransform {
  transform(value: any, locale: any): any {
    const date = new Date(value);
    const options: Intl.DateTimeFormatOptions = {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
    };
    return date.toLocaleDateString(locale, options);
  }
}

Search-overlay.component.html

<span *ngIf="card.date" class="hero-cards-carousel__date">
 {{ card.date | localizedDate: vm.locale?.code }}
 </span>

Result

"20. Dez. 2012"