Angular: How to display a date in French format

混江龙づ霸主 提交于 2019-12-11 14:33:09

问题


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:

  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
    })
    



回答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



来源:https://stackoverflow.com/questions/52440119/angular-how-to-display-a-date-in-french-format

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!