diff --git a/demo-shell/src/app.config.json b/demo-shell/src/app.config.json index dcfa95b392..8686c4b995 100644 --- a/demo-shell/src/app.config.json +++ b/demo-shell/src/app.config.json @@ -440,7 +440,7 @@ }, "dateValues":{ "defaultDateFormat": "mediumDate", - "defaultDateTimeFormat": "MMM d, y, h:mm", + "defaultDateTimeFormat": "MMM d, y, H:mm", "defaultLocale": "en-US" }, "files": { diff --git a/docs/core/pipes/localized-date.pipe.md b/docs/core/pipes/localized-date.pipe.md index 7f8d9d6b63..462acb97c1 100644 --- a/docs/core/pipes/localized-date.pipe.md +++ b/docs/core/pipes/localized-date.pipe.md @@ -33,7 +33,7 @@ The pipe takes a date and formats it and localizes it so the date is displayed i To localize the dates in your application, 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). -If you want add the japanese date localization in your ADF app you can add in your ```app.module.ts```: +For example, if you want add the japanese date localization in your ADF app you can add in your ```app.module.ts```: ```typescript import { AppConfigService, TRANSLATION_PROVIDER, DebugAppConfigService, CoreModule, CoreAutomationService } from '@alfresco/adf-core'; @@ -48,3 +48,23 @@ registerLocaleData(localeJa); ``` + +### Default values + +You can overwrite the default values of this pipe by adding these properties to your ```app.config.json```: + +```json + "dateValues": { + "defaultDateFormat": "mediumDate", + "defaultDateTimeFormat": "MMM d, y, H:mm", + "defaultLocale": "en-US" + } +``` + +| Name | Type | Description | +| ---- | ---- | ----------- | +| defaultDateFormat | string | The format to apply to date values | +| defaultDateTimeFormat | string | The format to apply to date-time values | +| defaultLocale | string | The locale id to apply | + +This configuration overwrites the values in the localized date pipe as well as other components to have more consistency across your app. However, you can still overwrite these values any time by using the pipe in your code. diff --git a/docs/user-guide/internationalization.md b/docs/user-guide/internationalization.md index b7fb498e47..bc69a79d07 100644 --- a/docs/user-guide/internationalization.md +++ b/docs/user-guide/internationalization.md @@ -154,31 +154,6 @@ component's `.ts` file: -## 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`. - - - - import { registerLocaleData } from '@angular/common'; - import localeFr from '@angular/common/locales/fr'; - - registerLocaleData(localeFr); - - - -Usage of the [localized date pipe](../core/pipes/localized-date.pipe.md). - - - - {{ date | adfLocalizedDate: format : locale }} - - - -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 diff --git a/docs/user-guide/localization.md b/docs/user-guide/localization.md new file mode 100644 index 0000000000..6a7de86da1 --- /dev/null +++ b/docs/user-guide/localization.md @@ -0,0 +1,74 @@ +### Localization in ADF + +Localization is the process of making something local in character or restricting it to a particular place. + +Dates are not written the same around the world. That is where localizing a date comes in handy. ADF lets you dynamically change the way dates are written in your app so that they can adapt to to a specific region. + +## Contents + +- [Setting up the configuration in your app](#setting-up-the-configuration-in-your-app) +- [Adding language support](#adding-language-support) +- [Using the localized date pipe](#using-the-localized-date-pipe) +- [Using the time ago pipe](#using-the-time-ago-pipe) + +## Setting up the configuration in your app + +You can overwrite the default values of this pipe by adding these properties to your ```app.config.json```: + +```json + "dateValues": { + "defaultDateFormat": "mediumDate", + "defaultDateTimeFormat": "MMM d, y, h:mm", + "defaultLocale": "en-US" + } +``` + +| Name | Type | Description | +| ---- | ---- | ----------- | +| defaultDateFormat | string | The format to apply to date values | +| defaultDateTimeFormat | string | The format to apply to date-time values | +| defaultLocale | string | The locale id to apply | + + +This configuration overwrites the values in the localized date pipe as well as other components to have more consistency across your app. However, you can still overwrite these values any time by using the pipe in your code. + +## Adding language support + +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`. + + + + import { registerLocaleData } from '@angular/common'; + import localeFr from '@angular/common/locales/fr'; + + registerLocaleData(localeFr); + + + +## Using the localized date pipe + +Converts a date to a given format and locale. + + + + {{ date | adfLocalizedDate: format : locale }} + + + +Usage of the [localized date pipe](../core/pipes/localized-date.pipe.md). + +## Using the time ago pipe + +Converts a recent past date into a number of days ago. + + + + {{ date | adfTimeAgo }} + + + +Usage of the [time ago pipe](../core/pipes/time-ago.pipe.md). + +Find more info about localization in the [Angular Docs](https://angular.io/guide/i18n#setting-up-the-locale-of-your-app). diff --git a/lib/core/card-view/models/card-view-datetimeitem.model.ts b/lib/core/card-view/models/card-view-datetimeitem.model.ts index 16a7581062..a868848e70 100644 --- a/lib/core/card-view/models/card-view-datetimeitem.model.ts +++ b/lib/core/card-view/models/card-view-datetimeitem.model.ts @@ -21,5 +21,5 @@ import { CardViewDateItemModel } from './card-view-dateitem.model'; export class CardViewDatetimeItemModel extends CardViewDateItemModel implements CardViewItem, DynamicComponentModel { type: string = 'datetime'; - format: string = 'MMM d, y, h:mm'; + format: string = 'MMM d, y, H:mm'; }