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)
+ }
+
+
+}
+
+