mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[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:
committed by
Denys Vuika
parent
990fa4625b
commit
7497822a46
28
docs/core/pipes/localized-date.pipe.md
Normal file
28
docs/core/pipes/localized-date.pipe.md
Normal 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).
|
@@ -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.
|
||||
|
@@ -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
|
||||
|
Reference in New Issue
Block a user