问题
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
回答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
回答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:
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');
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 })
回答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
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
来源:https://stackoverflow.com/questions/52440119/angular-how-to-display-a-date-in-french-format