From b73781874aaa245505264da1dabe7366314176a2 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Fri, 11 Mar 2022 15:43:05 +0300 Subject: [PATCH 1/3] feat: Convert short date,time and datetime functions to pipe #11909 --- .../packages/core/src/lib/core.module.ts | 10 ++++++ .../packages/core/src/lib/pipes/index.ts | 3 ++ .../src/lib/pipes/short-date-time.pipe.ts | 32 +++++++++++++++++++ .../core/src/lib/pipes/short-date.pipe.ts | 32 +++++++++++++++++++ .../core/src/lib/pipes/short-time.pipe.ts | 32 +++++++++++++++++++ 5 files changed, 109 insertions(+) create mode 100644 npm/ng-packs/packages/core/src/lib/pipes/short-date-time.pipe.ts create mode 100644 npm/ng-packs/packages/core/src/lib/pipes/short-date.pipe.ts create mode 100644 npm/ng-packs/packages/core/src/lib/pipes/short-time.pipe.ts 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) + } + + +} + + From d484affc5b46dd7d7f88bc2a2a6af0bf01e08bd7 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Wed, 30 Mar 2022 20:24:42 +0300 Subject: [PATCH 2/3] Add document of date pipes --- docs/en/UI/Angular/DateTime-Format-Pipe.md | 29 ++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 docs/en/UI/Angular/DateTime-Format-Pipe.md 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 }} +``` From 57d85255fdffd697a99ecd340892df730525e004 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Thu, 28 Apr 2022 10:53:45 +0300 Subject: [PATCH 3/3] Add navigation link of Date format pipes document --- docs/en/docs-nav.json | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index 6df98cb05a..f5ef7b1c84 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -1065,10 +1065,10 @@ { "text": "Extensions", "items": [ - { + { "text": "Overall", "path": "UI/Angular/Extensions-Overall.md" - }, + }, { "text": "Entity Action Extensions", "path": "UI/Angular/Entity-Action-Extensions.md" @@ -1084,6 +1084,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" } ] }