diff --git a/docs/en/UI/Angular/DateTime-Format-Pipe.md b/docs/en/UI/Angular/DateTime-Format-Pipe.md new file mode 100644 index 0000000000..4841ffe665 --- /dev/null +++ b/docs/en/UI/Angular/DateTime-Format-Pipe.md @@ -0,0 +1,29 @@ +# DateTime Format Pipes + +You can format date by Date pipe of angular. + +Example + +```html + {{today | date 'dd/mm/yy'}} +``` + +ShortDate, ShortTime and ShortDateTime format data like angular's data pipe but easier. Also the pipes get format from config service by culture. + +# ShortDate Pipe + +```html + {{today | shortDatePipe }} +``` + +# ShortTime Pipe + +```html + {{today | shortTimePipe }} +``` + +# ShortDateTime Pipe + +```html + {{today | shortDateTimePipe }} +``` diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index d021824d7f..7d919cf063 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -1097,10 +1097,10 @@ { "text": "Extensions", "items": [ - { + { "text": "Overall", "path": "UI/Angular/Extensions-Overall.md" - }, + }, { "text": "Entity Action Extensions", "path": "UI/Angular/Entity-Action-Extensions.md" @@ -1116,6 +1116,10 @@ { "text": "Dynamic Form Extensions", "path": "UI/Angular/Dynamic-Form-Extensions.md" + }, + { + "text": "Date, time and datetime format pipes", + "path": "UI/Angular/DateTime-Format-Pipe.md" } ] } diff --git a/npm/ng-packs/packages/core/src/lib/core.module.ts b/npm/ng-packs/packages/core/src/lib/core.module.ts index 1de96ef0ba..238ed9bb02 100644 --- a/npm/ng-packs/packages/core/src/lib/core.module.ts +++ b/npm/ng-packs/packages/core/src/lib/core.module.ts @@ -34,6 +34,9 @@ import { TENANT_KEY } from './tokens/tenant-key.token'; import { noop } from './utils/common-utils'; import './utils/date-extensions'; import { getInitialData, localeInitializer } from './utils/initial-utils'; +import { ShortDateTimePipe } from './pipes/short-date-time.pipe'; +import { ShortTimePipe } from './pipes/short-time.pipe'; +import { ShortDatePipe } from './pipes/short-date.pipe'; export function storageFactory(): OAuthStorage { return oAuthStorage; @@ -67,6 +70,9 @@ export function storageFactory(): OAuthStorage { SortPipe, StopPropagationDirective, ToInjectorPipe, + ShortDateTimePipe, + ShortTimePipe, + ShortDatePipe ], imports: [ OAuthModule, @@ -92,6 +98,10 @@ export function storageFactory(): OAuthStorage { SortPipe, StopPropagationDirective, ToInjectorPipe, + ShortDateTimePipe, + ShortTimePipe, + ShortDatePipe + ], providers: [LocalizationPipe] }) diff --git a/npm/ng-packs/packages/core/src/lib/pipes/index.ts b/npm/ng-packs/packages/core/src/lib/pipes/index.ts index 31e0a76593..71ce383cd3 100644 --- a/npm/ng-packs/packages/core/src/lib/pipes/index.ts +++ b/npm/ng-packs/packages/core/src/lib/pipes/index.ts @@ -1,3 +1,6 @@ export * from './localization.pipe'; export * from './sort.pipe'; export * from './to-injector.pipe'; +export * from './short-date.pipe'; +export * from './short-time.pipe'; +export * from './short-date-time.pipe'; diff --git a/npm/ng-packs/packages/core/src/lib/pipes/short-date-time.pipe.ts b/npm/ng-packs/packages/core/src/lib/pipes/short-date-time.pipe.ts new file mode 100644 index 0000000000..ef12be47d8 --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/pipes/short-date-time.pipe.ts @@ -0,0 +1,32 @@ +import { DatePipe, DATE_PIPE_DEFAULT_TIMEZONE } from '@angular/common'; +import { Inject, LOCALE_ID, Optional, Pipe, PipeTransform } from '@angular/core'; +import { ConfigStateService } from '../services'; +import { getShortDateShortTimeFormat } from '../utils/date-utils'; + +@Pipe({ + name: 'shortDateTime', + pure: true, +}) +export class ShortDateTimePipe extends DatePipe implements PipeTransform { + + constructor(private configStateService: ConfigStateService, + @Inject(LOCALE_ID) locale: string, + @Inject(DATE_PIPE_DEFAULT_TIMEZONE) @Optional() defaultTimezone?: string|null + ) { + super(locale, defaultTimezone) + } + + transform(value: Date | string | number, format?: string, timezone?: string, locale?: string): string | null; + transform(value: null | undefined, format?: string, timezone?: string, locale?: string): null; + transform( + value: string|number|Date|null|undefined, timezone?: string, + locale?: string): string|null { + + const format = getShortDateShortTimeFormat(this.configStateService); + return super.transform(value,format,timezone,locale) + } + + +} + + diff --git a/npm/ng-packs/packages/core/src/lib/pipes/short-date.pipe.ts b/npm/ng-packs/packages/core/src/lib/pipes/short-date.pipe.ts new file mode 100644 index 0000000000..30c9bd9323 --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/pipes/short-date.pipe.ts @@ -0,0 +1,32 @@ +import { DatePipe, DATE_PIPE_DEFAULT_TIMEZONE } from '@angular/common'; +import { Inject, LOCALE_ID, Optional, Pipe, PipeTransform } from '@angular/core'; +import { ConfigStateService } from '../services'; +import { getShortDateFormat } from '../utils/date-utils'; + +@Pipe({ + name: 'shortDate', + pure: true, +}) +export class ShortDatePipe extends DatePipe implements PipeTransform { + + constructor(private configStateService: ConfigStateService, + @Inject(LOCALE_ID) locale: string, + @Inject(DATE_PIPE_DEFAULT_TIMEZONE) @Optional() defaultTimezone?: string|null + ) { + super(locale, defaultTimezone) + } + + transform(value: Date | string | number, format?: string, timezone?: string, locale?: string): string | null; + transform(value: null | undefined, format?: string, timezone?: string, locale?: string): null; + transform( + value: string|number|Date|null|undefined, timezone?: string, + locale?: string): string|null { + + const format = getShortDateFormat(this.configStateService); + return super.transform(value,format,timezone,locale) + } + + +} + + diff --git a/npm/ng-packs/packages/core/src/lib/pipes/short-time.pipe.ts b/npm/ng-packs/packages/core/src/lib/pipes/short-time.pipe.ts new file mode 100644 index 0000000000..cf0450673d --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/pipes/short-time.pipe.ts @@ -0,0 +1,32 @@ +import { DatePipe, DATE_PIPE_DEFAULT_TIMEZONE } from '@angular/common'; +import { Inject, LOCALE_ID, Optional, Pipe, PipeTransform } from '@angular/core'; +import { ConfigStateService } from '../services'; +import { getShortTimeFormat } from '../utils/date-utils'; + +@Pipe({ + name: 'shortTime', + pure: true, +}) +export class ShortTimePipe extends DatePipe implements PipeTransform { + + constructor(private configStateService: ConfigStateService, + @Inject(LOCALE_ID) locale: string, + @Inject(DATE_PIPE_DEFAULT_TIMEZONE) @Optional() defaultTimezone?: string|null + ) { + super(locale, defaultTimezone) + } + + transform(value: Date | string | number, format?: string, timezone?: string, locale?: string): string | null; + transform(value: null | undefined, format?: string, timezone?: string, locale?: string): null; + transform( + value: string|number|Date|null|undefined, timezone?: string, + locale?: string): string|null { + + const format = getShortTimeFormat(this.configStateService); + return super.transform(value,format,timezone,locale) + } + + +} + +