[ADF-4342] Create localized pipe and centralize date format (#4813)

* [ADF-4342] Date Format defined in app config

* [ADF-4342] Create localized pipe and centralize date format

* Add unit test for new date pipe

* Add info internationalization docs

* Fix lining

* Fix linting

* Fix date pipe unit test

* [ADF-4342] Add supported language files

* Fix e2e tests
This commit is contained in:
davidcanonieto
2019-06-11 09:35:35 +01:00
committed by Denys Vuika
parent 990fa4625b
commit 7497822a46
38 changed files with 473 additions and 67 deletions

View File

@@ -0,0 +1,28 @@
# [Localized Date pipe](../../../lib/core/pipes/localized-date.pipe.ts "Defined in localized-date.pipe.ts")
Converts a date to an given format and locale.
## Basic Usage
<!-- {% raw %} -->
```HTML
<div>
Created date: {{ date | adfLocalizedDate }}
</div>
```
<!-- {% endraw %} -->
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| format | string | 'medium' | A format to apply to the date value. [Date Pipe Formats.](https://angular.io/api/common/DatePipe#custom-format-options) |
| locale | string | 'en-US' | A locale id for the locale format rules to use. |
## Details
The pipe takes a date and formats it and localizes it so the date is displayed in the proper format for the region. It uses the [Angular Date Pipe](https://angular.io/api/common/DatePipe#custom-format-options) so all the pre-defined and custom formats can be used.
When localizing a date, you will need to add the specific locale file for your region in order to use it. Read more about internationalization [here](https://angular.io/guide/i18n#i18n-pipes).

View File

@@ -21,8 +21,14 @@ Converts a recent past date into a number of days ago.
<!-- {% endraw %} -->
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| locale | string | 'en-US' | A locale id for the locale format rules to use. |
## Details
The pipe finds the difference between the input date and the current date. If it
is less than seven days then then the date will be formatted as "X days ago".
Otherwise, the usual full date format is used.
By default, it localizes the date to the language that is currently in use by the app. Furthermore, a different locale id can be passed to the pipe to overwrite the locale id to set a custom one.

View File

@@ -18,6 +18,7 @@ fairly straightforward to maintain.
- [I18n concepts](#i18n-concepts)
- [ADF support for i18n](#adf-support-for-i18n)
- [Using the translate pipe](#using-the-translate-pipe)
- [Using the localized date pipe](#using-the-localized-date-pipe)
- [Adding and replacing messages](#adding-and-replacing-messages)
- [Interpolations](#interpolations)
- [How the display language is selected](#how-the-display-language-is-selected)
@@ -153,6 +154,30 @@ component's `.ts` file:
<!-- {% endraw %} -->
## Using the localized date pipe
Date values are also localized in your ADF app. By default they are localized to en-US, although you can easily change this by adding the localization files provided by Angular.
If you want to use a different locale simply add the locale file for your region in your `app.module.ts`.
<!-- {% raw %} -->
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr);
<!-- {% endraw %} -->
Usage of the [localized date pipe](../core/pipes/localized-date.pipe.md).
<!-- {% raw %} -->
{{ date | adfLocalizedDate: format : locale }}
<!-- {% endraw %} -->
Find more info about this in the [Angular sDocs](https://angular.io/guide/i18n#setting-up-the-locale-of-your-app).
## Adding and replacing messages
The built-in translations certainly won't cover everything you will need for